title: How to get the values of data-* attributes in vuejs
body: <p>I have a button which when clicked opens up a modal, and the content to show in the modal is based on the data-attributes passed to the button.</p>
  
  <p>My button,</p>
  
  <pre><code>&lt;button class="btn btn-info" data-toggle="modal"
          data-target="#someModal" :data-id=item.id :data-name=item.name&gt;
          Edit
      &lt;/button&gt;
  </code></pre>
  
  <p>In my modal, I have some buttons and when clicked I should call a vuejs function with a parameter, which is the data-attribute.</p>
  
  <p>My modal button,</p>
  
  <pre><code>&lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-danger"
          @click.prevent="deleteItem()" data-dismiss="modal"&gt;
          Delete
      &lt;/button&gt;
      &lt;button type="button" class="btn btn-warning" data-dismiss="modal"&gt;
          &lt;span class='glyphicon glyphicon-remove'&gt;&lt;/span&gt; Close
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I have to pass a parameter to <code>deleteItem()</code>, and that parameter is the <code>data-id</code> which I get from the button above.</p>
  
  <p>Code for Modal</p>
  
  <pre><code>    &lt;div id="deleteModal" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;!-- Modal content--&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Delete&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="deleteContent"&gt;
                          Are you Sure you want to delete ?
                      &lt;/div&gt;
  
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn actionBtn btn-danger"
                              @click.prevent="deleteItem()"
                              data-dismiss="modal"&gt;
                              Delete &lt;span id="footer_action_button"
                                  class='glyphicon glyphicon-trash'&gt; &lt;/span&gt;
                          &lt;/button&gt;
                          &lt;button type="button" class="btn btn-warning"
                              data-dismiss="modal"&gt;
                              &lt;span class='glyphicon glyphicon-remove'&gt;&lt;/span&gt; Close
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>