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

Question

我想将一个对象从 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

Answer 1

这个块有几个错误：<div :v-for="option in this.options">&nbsp; &nbsp;<div v-if="option" class="option mt-4">&nbsp; &nbsp; &nbsp; &nbsp;{{ option }}&nbsp; &nbsp;</div></div>您必须解决以下问题：改为:v-for刚刚v-for删除this.，this.options因为您只应该this.在该script区域使用将整个块放在另一个块中，因为标签<div>内应该只有 1 个元素。<template>因此，由于您使用的是循环，因此将呈现多个元素