title: How to read the data-* of an element in VueJs?
body: <p>Hi im trying to learn VueJs</p>
  
  <p>I have 4 buttons with a color, and i try to change the background color of a div according to the button clicked.
  I'm having trouble reading the data-color object of the button and use it in vue, how do i do this?</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;button class="center-block" @click="changeColor" data-color="green"&gt;Green&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;button class="center-block" @click="changeColor" data-color="blue"&gt;Blue&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;button class="center-block" @click="changeColor" data-color="yellow"&gt;Yellow&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;button class="center-block" @click="changeColor" data-color="red"&gt;Red&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="colorblock center-block"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script&gt;
      new Vue({
          el: '#app',
          methods: {
              changeColor: function() {
                  // Things i tried
                  // console.log(this.data-color);
                  // console.log(this[data-color]);
              }
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm having a hard time understanding how this works in Vue...
  Also how do i target .colorblock and change it's css?</p>
  
  <p>Thanks in advance</p>