title: Defining props of a single page Vue component using v-for
body: <p>I am trying to render a Vue component, iterating through an array of data fetched thru Ajax, all inside a Rails app.</p>
  
  <p>I have the Slim template (index.html.slim) for the index page as follows. This makes use of a custom_form_item component, where items is the collection of custom forms data from Rails and each item in it is a component.</p>
  
  <pre><code>- content_for :head do
    = javascript_pack_tag "index_listing" 
    = stylesheet_pack_tag "index_listing" 
  
  div.container data-behavior="vue"
    &lt;custom_form_item v-for="item in items" v-bind:item="item" v-bind:key="item.id"&gt;&lt;/custom_form_item&gt;
  </code></pre>
  
  <p>This loads index_listing.js.coffee which is present in javascript/packs. The created event is used to load the data for items.</p>
  
  <pre><code>import Vue from 'vue/dist/vue.esm'
  import TurbolinksAdapter from 'vue-turbolinks'
  import VueResource from 'vue-resource'
  import CustomFormItem from '../components/custom_form_item.vue'
  
  Vue.use(VueResource)
  Vue.use(TurbolinksAdapter)
  
  Vue.component('custom_form_item', CustomFormItem)
  
  document.addEventListener('turbolinks:load', -&gt;
    index_list_vm = new Vue(
      el: '[data-behavior="vue"]'
      data: () -&gt;
        return {
          items: []
        }
      created: () -&gt;
        console.log "inside created()"
        this.loadItems()
      methods: {
        loadItems: () -&gt;
          self = this
          console.log "inside loadIems()"
          url = '...'
          self.$http.get(url).then((result) -&gt;
            console.log "Got: "+result.data
            self.items = result.data
          )
      }
    )
  )
  
  Turbolinks.dispatch("turbolinks:load")
  </code></pre>
  
  <p>The component is defined as below. It has a delete button using a component method to remove the respective item from items upon clicking.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="custom_form_list_item"&gt;
      &lt;label for="item_id"&gt;ID&lt;/label&gt;
      &lt;input id="item_id" v-model="item.id" readonly&gt;
      &lt;br/&gt;
      &lt;label for="item_name"&gt;Name&lt;/label&gt;
      &lt;input id="item_name" v-model="item.name" readonly&gt;
      &lt;br/&gt;
      &lt;label for="item_version"&gt;Version&lt;/label&gt;
      &lt;input id="item_version" v-model="item.version" readonly&gt;
      &lt;br/&gt;
      &lt;label for="item_label"&gt;Label&lt;/label&gt;
      &lt;input id="item_label" v-model="item.label" readonly&gt;
      &lt;br/&gt;
      &lt;div class="btn-group btn-group-toggle" data-toggle="buttons"&gt;
        &lt;button type="button" class="btn-warning btn-sm" v-on:click="redirToEditURL(item.id)"&gt;
           &lt;i class="fas fa-edit"&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;button type="button" class="btn-danger btn-sm" v-on:click="deleteForm(item.id)"&gt;
           &lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      item: {
        type: Object,
        required: true,
      }
    },
    methods: {
      redirToEditURL: function(formid) {
        let url = ...
        window.location = url
      },
      deleteItem: function(key) {
        this.$delete(this.items, key);
      },
      deleteForm: function(formid) {
        let url = '...';
        let deleteListItem = this.deleteItem;
        $.ajax({
          url: url,
          method: "DELETE",
        }).done(deleteListItem.bind(this, formid));
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  ...
  &lt;/style&gt;
  </code></pre>
  
  <p>When I render this I get the following warning and component is rendered without any data (item.* values present in the template)</p>
  
  <pre><code>[Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got Array.
  
  found in
  
  ---&gt; &lt;CustomFormItem&gt; at app/javascript/components/custom_form_item.vue
         &lt;Root&gt;
  </code></pre>
  
  <p>Also the Vue dev tools shows this as Props,
  <a href="https://i.stack.imgur.com/Iba1S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iba1S.png" alt="vue-dev-tools-props"></a></p>
  
  <p>item in Props is actually items rather than one from the loop (item in items).</p>
  
  <p><strong>How can I get the right props for the component, i.e. pass item from items correctly into the component while populating items from an external source via ajax?</strong> </p>
  
  <p><strong>Fixed!</strong> Solution: self.items = result.data.data (the result was passed as an JSON object {data: ...} by rails, which was result.data.data.</p>