Wie bekomme ich die Werte von Daten - * Attribute in vuejs

Question

Ich habe eine Schaltfläche, die beim Klicken öffnet ein modales, und der Inhalt im Modal zu zeigen, basiert auf den Daten-Attribute an die Schaltfläche übergeben.

Meine Taste,

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

In meinem modal, habe ich einige Tasten und wenn darauf geklickt sollte ich eine vuejs Funktion mit einem Parameter aufrufen, die die Daten-Attribut ist.

Mein modal Taste,

<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> 

Hier muss ich einen Parameter deleteItem() geben, und dieser Parameter ist die data-id, die ich vom Button oben erhalten.

-Code für Modal

<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

Eine einfache Option wird die ID auf die Schaltfläche Löschen werden binden und

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

Answer 2

Ich empfehle eine console.log(this) in einer Komponente Funktion zu tun, dann diese Funktion aufrufen auf Klicken Sie auf die Schaltfläche, um alle Eigenschaften der Komponente zu überprüfen.

(siehe Bild angehängt, unten, zum Beispiel Ausgabe der obigen console.log-Anweisung.)

Dies zeigt Ihnen, dass unter anderem Sie Zugriff auf die $el Eigenschaft hat das DOM-Element zu halten. Die eine ganze Reihe von Möglichkeiten eröffnet, wie der Lage, den folgenden Code zu dem mounted Lifecycle Haken Ihrer Komponente hinzuzufügen:

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

Und für dieses Beispiel this.myAttribute in (zum Beispiel definiert worden wäre,) Ihre Daten Eigenschaft:

// 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

---

Beispiel ausgegeben, wenn console.log(this) insid Ausführung e eine Komponente: