使用v-for定义单页Vue组件的道具

我试图渲染一个Vue组件，遍历通过Ajax获取的数据数组，所有这些都在Rails应用程序中 .

我有索引页面的Slim模板（index.html.slim），如下所示 . 这使用了custom_form_item组件，其中items是Rails中自定义表单数据的集合，其中的每个项目都是一个组件 .

- content_for :head do
  = javascript_pack_tag "index_listing" 
  = stylesheet_pack_tag "index_listing" 

div.container data-behavior="vue"
  <custom_form_item v-for="item in items" v-bind:item="item" v-bind:key="item.id"></custom_form_item>

这会加载index_listing.js.coffee，它存在于javascript / packs中 . 创建的事件用于加载项目的数据 .

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', ->
  index_list_vm = new Vue(
    el: '[data-behavior="vue"]'
    data: () ->
      return {
        items: []
      }
    created: () ->
      console.log "inside created()"
      this.loadItems()
    methods: {
      loadItems: () ->
        self = this
        console.log "inside loadIems()"
        url = '...'
        self.$http.get(url).then((result) ->
          console.log "Got: "+result.data
          self.items = result.data
        )
    }
  )
)

Turbolinks.dispatch("turbolinks:load")

该组件定义如下 . 它有一个删除按钮，使用组件方法在单击时从项目中删除相应的项目 .

<template>
  <div class="custom_form_list_item">
    <label for="item_id">ID</label>
    <input id="item_id" v-model="item.id" readonly>
    

    <label for="item_name">Name</label>
    <input id="item_name" v-model="item.name" readonly>
    

    <label for="item_version">Version</label>
    <input id="item_version" v-model="item.version" readonly>
    

    <label for="item_label">Label</label>
    <input id="item_label" v-model="item.label" readonly>
    

    <div class="btn-group btn-group-toggle" data-toggle="buttons">
      <button type="button" class="btn-warning btn-sm" v-on:click="redirToEditURL(item.id)">
         <i class="fas fa-edit"></i>
      </button>
      <button type="button" class="btn-danger btn-sm" v-on:click="deleteForm(item.id)">
         <i class="fas fa-trash-alt"></i>
      </button>
    </div>
  </div>
</template>

<script>
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));
    }
  }
}
</script>

<style lang="scss" scoped>
...
</style>

当我渲染这个时，我得到以下警告，并且渲染组件时没有任何数据（模板中存在item . *值）

[Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got Array.

found in

---> <CustomFormItem> at app/javascript/components/custom_form_item.vue
       <Root>

此外，Vue dev工具将其显示为Props，

道具中的项目实际上是项目，而不是循环中的项目（项目中的项目） .

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?

Fixed! 解决方案：self.items = result.data.data（结果作为jSON对象{data：...}传递，由rails.data.data传递 .