So erhalten Sie Datenattribute in vue.js

Question

Ich habe eine Schaltfläche, und ein Modal wird geöffnet, wenn darauf geklickt wird. Die Daten im Modal werden mit Datenattributen für die Schaltfläche übergeben.

Meine Taste,

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

Es hat einige Daten wie id und name Attribute.

Mein modal,

<div id="editModal" 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">Edit</h4> 
       </div> 
       <div class="modal-body"> 
        <form class="form-horizontal" role="form"> 
         <div class="form-group"> 
          <label class="control-label col-sm-2">ID:</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="fid" disabled> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2">Name:</label> 
          <div class="col-sm-10"> 
           <input type="name" class="form-control" id="n"> 
          </div> 
         </div> 
        </form> 
        <div class="modal-footer"> 
         <button type="button" class="btn actionBtn btn-success" 
          @click.prevent="updateItem()" data-dismiss="modal"> 
          Update <span id="footer_action_button" 
           class='glyphicon glyphicon-check'> </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> 

Eigentlich mit Javascript tue, und die modal-ID und Name angezeigt wird, wie ich wollte. Und ich muss diese Datenattribute auch an die update() Funktion übergeben.

Wie zur Problemumgehung in mit Datenattributen.

$(document).on('click', '.edit-modal', function() { 
      $('#fid').val($(this).data('id')); 
      $('#n').val($(this).data('name')); 
     }); 

Answer 1

Nun, ich weiß nicht, ob es eine Abhilfe ist aber, was Sie tun können, ist eine modal Komponente zu erstellen und dann die Daten, um es passieren props oder besser noch durch slots wie in modal Beispiel mit Ich habe verlinkt.

Dies sollte Sie in die richtige Richtung zeigen.