title: Accessing variable parameters of Vuejs component inside a loop
body: <p>I'm new to Vuejs. I have written a vuejs component for delete confirmation modal. I call this inside a list of records, here is my code :</p>
  
  <pre><code><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template id="bs-modal"&gt;
      &lt;div class="modal fade" id="confirmDeleteModal" tabindex="-1"
           role="dialog" aria-labelledby="confirmDeleteModalLabel"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close"
                              data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;h4 class="modal-title"
                          id="confirmDeleteModalLabel"&gt;
                          Delete {{ item | capitalize }}
                      &lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      Are you sure about deleting the {{ name }} {{ item }} ?
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default"
                              data-dismiss="modal"&gt;No&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary"
                              v-on:click="deleteItem(id)"&gt;Yes&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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) =&gt; {
                      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);
              }
          }
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  
  </code></pre>
  
  <p>And here is my blade template where I call this component (I'm using laravel 5.3) :</p>
  
  <pre><code><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@foreach ($categories as $category)
      &lt;tr data-id="{{ $category-&gt;id }}"&gt;
          &lt;td&gt;{{ $category-&gt;id }}&lt;/td&gt;
          &lt;td&gt;{{ $category-&gt;name }}&lt;/td&gt;
          &lt;td id="actions"&gt;
              &lt;a href="{{ url('admin/category/' . $category-&gt;id . '/get') }}"&gt;Show&lt;/a&gt;
              &lt;a href="{{ url('admin/category/' . $category-&gt;id . '/edit') }}"&gt;Edit&lt;/a&gt;
              &lt;a href="#" data-toggle="modal" data-target="#confirmDeleteModal"&gt;Delete&lt;/a&gt;
              &lt;confirm-delete-modal item="category" id="{{ $category-&gt;id }}" name="{{ $category-&gt;name }}"&gt;&lt;/confirm-delete-modal&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  @endforeach</code></pre>
  </div>
  </div>
  
  </code></pre>
  
  <p>The parameters I pass to the component are variable and according to Vue devtools, the component gets the correct value for each record but when I run the code, it always gets the parameters of first record in list. </p>
  
  <p>Am I missing something ? </p>