javascript - 使用 v-for 定义单页 Vue 组件的 props

问题描述

我正在尝试渲染一个 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>

这会加载 javascript/packs 中的 index_listing.js.coffee。created 事件用于加载项目的数据。

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 开发工具也将其显示为 Props，

Props 中的项目实际上是项目，而不是循环中的项目（项目中的项目）。

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

固定的！解决方案：self.items = result.data.data（结果被rails作为JSON对象{data: ...}传递，即result.data.data。

标签： javascriptruby-on-railsvue.jscoffeescriptslim-lang

javascript - 使用 v-for 定义单页 Vue 组件的 props

问题描述

解决方案

推荐阅读