Я пытаюсь визуализировать компонент 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 /пакеты.Созданное событие используется для загрузки данных для элементов.
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>
Когда я отрисовываю это, я получаю следующее предупреждение, и компонент отображается без каких-либо данных (элемент. * Значения присутствуютв шаблоне)
[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, 
элемент в Props на самом деле является элементом, а не элементом из цикла(элемент в элементах).
Как получить правильные реквизиты для компонента, то есть правильно передать элемент из элементов в компонент при заполнении элементов из внешнего источника через ajax?
Исправлено! Решение: self.items = result.data.data (результат был передан рельсами как объект JSON {data: ...}, который был result.data.data.