Как получить значения атрибутов data- * в vuejs

Question

У меня есть кнопка, которая при нажатии открывается модальным, а контент, отображаемый в модальном, основан на атрибутах данных, переданных кнопке.

Моя кнопка,

<button class="btn btn-info" data-toggle="modal" 
     data-target="#someModal" :data-id=item.id :data-name=item.name> 
     Edit 
    </button> 

В моей модальные, у меня есть несколько кнопок, и при нажатии я должен вызвать vuejs функцию с параметром, который является атрибутом данных.

Моя модальный кнопка,

<div class="modal-footer"> 
    <button type="button" class="btn btn-danger" 
     @click.prevent="deleteItem()" data-dismiss="modal"> 
     Delete 
    </button> 
    <button type="button" class="btn btn-warning" data-dismiss="modal"> 
     <span class='glyphicon glyphicon-remove'></span> Close 
    </button> 
</div> 

Здесь я должен передать параметр в deleteItem(), и этот параметр является data-id, который я получаю от кнопки выше.

Код для модальных

<div id="deleteModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Delete</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="deleteContent"> 
         Are you Sure you want to delete ? 
        </div> 

        <div class="modal-footer"> 
         <button type="button" class="btn actionBtn btn-danger" 
          @click.prevent="deleteItem()" 
          data-dismiss="modal"> 
          Delete <span id="footer_action_button" 
           class='glyphicon glyphicon-trash'> </span> 
         </button> 
         <button type="button" class="btn btn-warning" 
          data-dismiss="modal"> 
          <span class='glyphicon glyphicon-remove'></span> Close 
         </button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Простой вариант будет привязать идентификатор к кнопке удаления, а

<button type="button" class="btn btn-danger" 
     @click.prevent="deleteItem(this)" :data-id=item.id data-dismiss="modal"> 
     Delete 
    </button> 

Answer 2

Я рекомендую делать console.log(this) внутри функции компонента, то вызов этой функции на нажмите кнопку, чтобы вы могли проверить все свойства компонента.

(см прикрепленного изображения, ниже, например, выход из выше console.log заявления.)

Это показывает, что среди прочего, у вас есть доступ к $el собственности, держащей элемент DOM. Который открывает целый ряд возможностей, такие как возможность добавить следующий код в mounted жизненном цикле крючок компоненты:

mounted() { 
    console.log(this); 
    this.myAttribute = this.$el.getAttribute('data-attribute-name'); 
}, 

И для этого примера, this.myAttribute был бы определен в (например,) ваше имущество данные:

// This value gets attributed during an earlier lifecycle hook. 
// It will be overridden in the component's mounted() lifecycle hook. 
data() { 
    return { 
    myAttribute: 'defaultvalue' 
    } 
} 

Vue.js (v2) Lifecycle hooks documentation

---

Пример вывода при выполнении console.log(this) insid е компонент: