Ву.JS-TypeError: не удается использовать оператор 'in' для поиска 'undefined' в объекте Laravel

Ву.JS-TypeError: не удается использовать оператор 'in' для поиска 'undefined' в объекте Laravel

16.12.2019 12:21:09 Просмотров 48 Источник

Я хочу передать объект из 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

Является ответом!
Alex Hoffman

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>. Так как вы используете цикл, несколько элементов будут отображаться

https://stackoverflow.com/questions/59348171/vue-js-typeerror-cannot-use-in-operator-to-search-for-undefined-in-larave/59348190#comment104892394_59348190
Когда я удаляю ": "from": v-for", я получаю эту ошибку во время компиляции: "не могу использовать V-for на корневом элементе компонента с отслеживанием состояния, потому что он отображает несколько элементов."
https://stackoverflow.com/questions/59348171/vue-js-typeerror-cannot-use-in-operator-to-search-for-undefined-in-larave/59348190#comment104892422_59348190
Это неуместная ошибка. Я обновил ответ
Помочь в развитии проекта:
Закрыть X