如何讀取VueJs中元素的數據*？

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); 
 
    } 
 
    } 
 
});