Question

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

我具有索引页面的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>

这将加载存在于javascript / packs中的index_listing.js.coffee。创建的事件用于加载商品数据。

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>
    <br/>
    <label for="item_name">Name</label>
    <input id="item_name" v-model="item.name" readonly>
    <br/>
    <label for="item_version">Version</label>
    <input id="item_version" v-model="item.version" readonly>
    <br/>
    <label for="item_label">Label</label>
    <input id="item_label" v-model="item.label" readonly>
    <br/>
    <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开发工具也将其显示为道具，

道具中的

物品实际上是物品，而不是循环中的物品（物品中的物品）。

如何为组件获取正确的道具，即通过ajax从外部来源填充项目时，将项目中的项目正确传递到组件中？

已修复！解决方案：self.items = result.data.data（结果通过rails作为result.data.data的JSON对象{data：...}传递。

Answer 1

尝试一下。

<div v-for="item in items">
   <custom_form_item :item="item" :key="item.id"></custom_form_item>
</div>

Answer 2

已修复！解决方案：self.items = result.data.data（结果作为结果通过rails作为JSON对象{data：...}传递，即result.data.data。

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

2 个答案: