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