javascript - 如何读取 VueJs 中元素的 data-*？

Question

嗨，我正在尝试学习 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？

提前致谢

Answer 1

将它附加到事件并像这样读取数据集。

new Vue({
  el: '#app',
  methods: {
    changeColor: function(evt) {
      console.log(evt.target.dataset.color);
    }
  }
});