Как прочитать данные- * элемента в VueJs?

1

Привет, я пытаюсь изучить 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?

заранее спасибо

Теги:
vue.js
vuejs2

1 ответ

3
Лучший ответ

Прикрепите его к событию и прочитайте набор данных так.

new Vue({
  el: '#app',
  methods: {
    changeColor: function(evt) {
      console.log(evt.target.dataset.color);
    }
  }
});
  • 0
    Удивительно, именно то, что я искал. Это работает. Я утвердю ваш awnser через 8 минут.
  • 0
    @JordyGroote офигенно :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню