如何獲取vue.js中的數據屬性

Question

我有一個按鈕，點擊時會調用模式。模式中的數據通過該按鈕的數據屬性傳遞。

我的按鈕，

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

它像id和name一些數據屬性。

我的模式，

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

其實，我用JavaScript做，並進行模態顯示ID，名稱和我想要的。我還需要將這些數據屬性傳遞給update()函數。

如何在具有數據屬性的vuejs中解決方法。

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

Answer 1

好了，我不知道這是否是一個解決方法，但你可以做的是創造一個modal組件，然後通過props使用slots像莫代爾例子中，我將數據傳遞給它或更好鏈接。

這應該指向正確的方向。