Как получить атрибуты данных в 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, и модальный отображает идентификатор и имя, как я хотел. И мне также нужно передать эти атрибуты данных функции update().

Как обходиться в vuejs с атрибутами данных.

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

Answer 1

Ну, я не знаю, если это обходной путь, но то, что вы можете сделать, это создать modal компонент, а затем передать данные через props или еще лучше с помощью slots как в модальной примере я связаны между собой.

Это должно указывать на правильное направление.