Доступ к переменным параметрам компонента Vuejs внутри цикла

Question

Я новичок в Vuejs. Я написал компонент vuejs для подтверждения подтверждения модальности. Я называю это внутри списка записей, вот мой код:

          
  
 
   
 
    
<template id="bs-modal"> 
 
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" 
 
     role="dialog" aria-labelledby="confirmDeleteModalLabel"> 
 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" 
 
          data-dismiss="modal" aria-label="Close"> 
 
         <span aria-hidden="true">&times;</span> 
 
        </button> 
 
        <h4 class="modal-title" 
 
         id="confirmDeleteModalLabel"> 
 
         Delete {{ item | capitalize }} 
 
        </h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        Are you sure about deleting the {{ name }} {{ item }} ? 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" 
 
          data-dismiss="modal">No</button> 
 
        <button type="button" class="btn btn-primary" 
 
          v-on:click="deleteItem(id)">Yes</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 
     data() { 
 
      return { 
 
      } 
 
     }, 
 
     props: ['item', 'name', 'id'], 
 
     methods: { 
 
      deleteItem : function(id) { 
 
       var url   = window.location.href; 
 
       var baseUrl  = url.substring(0, 
 
         url.indexOf('/', url.indexOf('://') + 3) + 1); 
 
       var adminPosition = url.indexOf('admin/') + 6; 
 
       var entity  = url.substring(adminPosition, 
 
            url.indexOf('/', adminPosition)); 
 

 
       this.$http.delete(baseUrl + "admin/" + entity + "/" + id).then((response) => { 
 
        if (response.body.status_code == '200') { 
 

 
         // Calling just modal('hide') does not hide the backdrop 
 
         // There should be a better solution for this 
 
         $("#confirmDeleteModal").modal("hide"); 
 
         $("#confirmDeleteModal").hide(); 
 
         $('.modal-backdrop').hide(); 
 
         $("body").removeClass("modal-open"); 
 

 
         $("tr[data-id=" + id + "]").remove(); 
 

 
         // Display success message 
 
        } 
 
       }); 
 
      } 
 
     }, 
 
     filters: { 
 
      capitalize: function (value) { 
 
       if (!value) { 
 
        return ''; 
 
       } 
 
       value = value.toString(); 
 

 
       return value.charAt(0).toUpperCase() + value.slice(1); 
 
      } 
 
     } 
 
    } 
 
</script>
 
   
 
  
 
 

 

А вот мой шаблон лезвия, где я называю этот компонент (я использую Laravel 5.3):

          
  
 
   
 
    
@foreach ($categories as $category) 
 
    <tr data-id="{{ $category->id }}"> 
 
     <td>{{ $category->id }}</td> 
 
     <td>{{ $category->name }}</td> 
 
     <td id="actions"> 
 
      <a href="{{ url('admin/category/' . $category->id . '/get') }}">Show</a> 
 
      <a href="{{ url('admin/category/' . $category->id . '/edit') }}">Edit</a> 
 
      <a href="#" data-toggle="modal" data-target="#confirmDeleteModal">Delete</a> 
 
      <confirm-delete-modal item="category" id="{{ $category->id }}" name="{{ $category->name }}"></confirm-delete-modal> 
 
     </td> 
 
    </tr> 
 
@endforeach
 
   
 
  
 
 

 

Параметры Я перехожу к компоненту переменной и, согласно Vue devtools, компонент получает правильное значение для каждой записи, но когда я запускаю код, он всегда получает параметры первой записи в списке.

Я что-то упустил?

Answer 1

Я думаю, что основная проблема исходила из того же идентификатора для всех компонентов, и когда вы нажмете на ссылку первый элемент с идентификатором (confirmDeleteModal), будет открыт.

Вы можете установить уникальный идентификатор для каждого компонента, как это:

<div class="modal fade" :id="'confirmDeleteModal_'+id" tabindex="-1" 
    role="dialog" aria-labelledby="confirmDeleteModalLabel"> 

Answer 2

Вы должны использовать v-bind при прохождении переменных как props, как следующий»

<confirm-delete-modal item="category" v-bind:id="{{ $category->id }}" v-bind:name="{{ $category->name }}"></confirm-delete-modal> 

или короче, вы можете заменить v-bind с : как:

<confirm-delete-modal item="category" :id="{{ $category->id }}" :name="{{ $category->name }}"></confirm-delete-modal> 

Answer 3

Я думаю, что вызов подтвердить, удалить -modal для каждой записи является неправильным методом. Я переместил модальный вне цикла и внесла некоторые изменения в код для решения проблемы:

Вот код confirmDelete.vue:

<template id="modal-template"> 
 
    <transition name="confirm-delete-modal"> 
 
     <div class="modal-mask"> 
 
      <div class="modal-wrapper"> 
 
       <div class="modal-container"> 
 

 
        <div class="modal-header"> 
 
         <slot name="header"> 
 
          default header 
 
         </slot> 
 
        </div> 
 

 
        <div class="modal-body"> 
 
         <slot name="body"> 
 
          Are you sure about deleting the {{ this.$parent.item_name }} {{ item }} ? 
 
         </slot> 
 
        </div> 
 

 
        <div class="modal-footer"> 
 
         <slot name="footer"> 
 
          <button class="modal-default-button" @click="deleteItem();"> 
 
           Yes 
 
          </button> 
 
          <button class="modal-default-button" @click="$emit('close')"> 
 
           No 
 
          </button> 
 
         </slot> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </transition> 
 
</template> 
 

 
<script> 
 
    export default { 
 
     data() { 
 
      return { 
 
      } 
 
     }, 
 
     props: ['item'], 
 
     methods: { 
 
      deleteItem : function() { 
 
       var url   = window.location.href; 
 
       var baseUrl  = url.substring(0, url.indexOf('/', url.indexOf('://') + 3) + 1); 
 
       var adminPosition = url.indexOf('admin/') + 6; 
 
       var entity  = url.substring(adminPosition, url.indexOf('/', adminPosition)); 
 

 
       this.$http.delete(baseUrl + "admin/" + entity + "/" + this.$parent.item_id).then((response) => { 
 
        if (response.body.status_code == '200') { 
 

 
         $("tr[data-id=" + this.$parent.item_id + "]").remove(); 
 

 
         this.$emit('close'); 
 
         // Display success message 
 
        } 
 
       }); 
 
      } 
 
     }, 
 
     filters: { 
 
      capitalize: function (value) { 
 
       if (!value) { 
 
        return ''; 
 
       } 
 
       value = value.toString(); 
 

 
       return value.charAt(0).toUpperCase() + value.slice(1); 
 
      } 
 
     } 
 
    } 
 
</script>

А вот шаблон лезвия:

@foreach ($categories as $category) 
 
     <tr data-id="{{ $category->id }}"> 
 
      <td>{{ $category->id }}</td> 
 
      <td>{{ $category->name }}</td> 
 
      <td id="actions"> 
 
       <a href="{{ url('admin/category/' . $category->id . '/get') }}">Show</a> 
 
       <a href="{{ url('admin/category/' . $category->id . '/edit') }}">Edit</a> 
 
       <a href="#" id="{{ $category->name }}_{{ $category->id }}" @click="setDeleteModal($event)">Delete</a> 
 
      </td> 
 
     </tr> 
 
    @endforeach 
 
    <confirm-delete-modal item="category" 
 
          v-if="showDeleteModal" 
 
          @close="closeDeleteModal"> 
 
     <h3 slot="header">Delete Category</h3> 
 
    </confirm-delete-modal>

И, наконец, вот код экземпляра родительского экземпляра:

new Vue({ 
 
     el: '#crud', 
 
     data: { 
 
      showDeleteModal: false, 
 
      item_id: '', 
 
      item_name: '' 
 
     }, 
 
     methods: { 
 
      setDeleteModal: function(e) { 
 
       this.showDeleteModal = true; 
 
       params    = e.target.id.split("_"); 
 
       this.item_id   = params[1]; 
 
       this.item_name  = params[0]; 
 
      }, 
 
      closeDeleteModal: function() { 
 
       this.showDeleteModal = false; 
 
      } 
 
     } 
 
    });

Я надеюсь, что это поможет кому-то еще.

Буду рад узнать мнение экспертов в vuejs.