ループ内のVuejsコンポーネントの可変パラメータへのアクセス

Question

私はVuejsを初めて使用しています。私は削除確認モーダルのためのvuejsコンポーネントを書いています。パラメータ

          
  
 
   
 
    
@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
 
   
 
  
 
 

 

：

          
  
 
   
 
    
<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を使用しています）です：私はここに私のコードで、レコードのリスト内にこれを呼び出します私はコンポーネントに渡す変数とVueのdevtoolsに従って、コンポーネントは各レコードの正しい値を取得しますが、私はコードを実行すると、常にリストの最初のレコードのパラメータを取得します。

何か不足していますか？

Answer 1

私は主な問題はすべてのコンポーネントの同じIDから来たと思うし、ID（confirmDeleteModal）の最初の要素をクリックするとリンクが開きます。

あなたはこのような各コンポーネントに固有のIDを設定することができます。

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

Answer 2

あなたは

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

またはショートにあなたがよう:でv-bindを置き換えることができます「次のように、変数を渡すときpropsとしてv-bindを使用する必要があります。

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

Answer 3

私が確認し、削除を呼び出すと思います各レコードの-modalは間違った方法です。私はモーダルをループの外側に移動し、問題を解決するコードをいくつか変更しました：

0123ここ

は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の専門家の考えを知ってうれしいです。