Привет, я пытаюсь изучить VueJs
У меня есть 4 кнопки с цветом, и я пытаюсь изменить цвет фона div в соответствии с нажатой кнопкой. У меня возникли проблемы с чтением объекта цвета данных кнопки и его использованием в vue, как мне это сделать?
Мой код:
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-3">
<button class="center-block" @click="changeColor" data-color="green">Green</button>
</div>
<div class="col-md-3">
<button class="center-block" @click="changeColor" data-color="blue">Blue</button>
</div>
<div class="col-md-3">
<button class="center-block" @click="changeColor" data-color="yellow">Yellow</button>
</div>
<div class="col-md-3">
<button class="center-block" @click="changeColor" data-color="red">Red</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="colorblock center-block">
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
methods: {
changeColor: function() {
// Things i tried
// console.log(this.data-color);
// console.log(this[data-color]);
}
}
});
</script>
Мне сложно понять, как это работает в Vue... Также как я нацелился на.colorblock и изменил его css?
заранее спасибо
Прикрепите его к событию и прочитайте набор данных так.
new Vue({
el: '#app',
methods: {
changeColor: function(evt) {
console.log(evt.target.dataset.color);
}
}
});