Vue.JS - TypeError：无法使用“in”运算符在 Laravel 对象中搜索“未定义”答案

【问题标题】：Vue.JS - TypeError: Cannot use 'in' operator to search for 'undefined' in Laravel ObjectVue.JS - TypeError：无法使用“in”运算符在 Laravel 对象中搜索“未定义”
【发布时间】：2020-04-08 10:01:20
【问题描述】：

我想将一个对象从 Laravel 传递给 Vue.js，然后在 :v-for="option in this.options" 中使用它。我能够将对象从我的 Laravel 刀片传递到 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)

Vue.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

【问题讨论】：

标签： javascript php laravel vue.js

【解决方案1】：

这块有几个错误：

<div :v-for="option in this.options">
   <div v-if="option" class="option mt-4">
       {{ option }}
   </div>
</div>

您必须解决以下问题：

将 :v-for 更改为 v-for
从 this.options 中删除 this.，因为您只应该在script 区域使用this.
将整个块放在另一个<div> 中，因为<template> 标记内应该只有一个元素。因此，由于您使用的是循环，因此将呈现多个元素

【讨论】：