Ву.JS-TypeError: не удается использовать оператор 'in' для поиска 'undefined' в объекте Laravel
Я хочу передать объект из Laravel в Vue.js, затем используйте его в:v-for="option in this.options"
. Я могу передать объект из моего Laravel blade в Vue.JS компонент и отображать его в консоли, но когда я хочу использовать объект в v-for
я получаю эту ошибку:
TypeError: Cannot use 'in' operator to search for 'undefined' in [{"id":1,"poll_id":1,"content":"Black","created_at":"2019-12-15 02:53:52","updated_at":"2019-12-15 02:53:52"},{"id":2,"poll_id":1,"content":"Blue","created_at":"2019-12-15 02:53:52","updated_at":"2019-12-15 02:53:52"}]
at Proxy.render (app.js:48972)
at VueComponent.Vue._render (app.js:52735)
at VueComponent.updateComponent (app.js:53251)
at Watcher.get (app.js:53662)
at new Watcher (app.js:53651)
at mountComponent (app.js:53258)
at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:58228)
at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:61113)
at init (app.js:52315)
at createComponent (app.js:55157)
Ву.JS компонент
<template>
<div :v-for="option in this.options">
<div v-if="option" class="option mt-4">
{{ option }}
</div>
</div>
</template>
<script>
export default {
props: [
'id', 'options'
],
mounted() {
this.options = JSON.parse(this.options);
console.log(this.options);
},
}
</script>
Лезвие Laravel
<options :id="{{ $poll->id }}" :options="'{{ json_encode($poll->options) }}'"></options>
console.log(this.options)
возвращается
(2) [{…}, {…}, __ob__: Observer]
0: {…} // id, poll_id, content, created_at, updated_at
1: {…} // id, poll_id, content, created_at, updated_at
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array
У вопроса есть решение - Посмотреть?
Ответы - Ву.JS-TypeError: не удается использовать оператор 'in' для поиска 'undefined' в объекте Laravel / Vue.JS - TypeError: Cannot use 'in' operator to search for 'undefined' in Laravel Object
Является ответом!

16.12.2019 12:24:08
В этом блоке есть несколько ошибок:
<div :v-for="option in this.options">
<div v-if="option" class="option mt-4">
{{ option }}
</div>
</div>
Вы должны исправить следующее:
- Изменения
:v-for
для толькоv-for
Уберите
this.
отthis.options
, потому что вы только должны используйthis.
вscript
, потому что внутри<div>
. Так как вы используете цикл, несколько элементов будут отображаться
Помочь в развитии проекта: