我在laravel中的第一个Vue.js组件让我发疯 . 我需要在javascript中在组件和数组之间进行绑定 . 由于在数组中添加了元素，我需要使其响应，但所有与此主题相关的文章都没有帮助我 . 看来我只是不打我的目标变量 .

我的app.js（它包含一些测试数据，以验证我的组件是否在原理中工作，它确实如此）：

Vue.component('veg-bed-table', require('./components/VegBedTable.vue'));

var vegbed = new Vue({
    el: '#vegbed',
    data: function () {
        return {
            bedcomposition: [{id:2222, picref:234, plant:{name:1234}},{id:2223, picref:234, plant:{name:1234}}]
        }
    }
});

我的VegBedTable.vue：

<template>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Image</th>
                <th scope="col">Name</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="plant in plants">
                <th scope="row">{{ plant.id }}</th>
                <td><img height="18px" :src="plant.picref"></td>
                <td>{{ plant.plant.name }}</td>
            </tr>               
        </tbody>    
    </table>
</template>

<script>
    export default {
        props:[
                'plants'
            ],
            
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

刀片中组件的调用如下所示：

<div id="vegbed">
                <veg-bed-table v-bind:plants="bedcomposition"></veg-bed-table>
            </div>

加载页面后，一切看起来都很好，组件显示初始数据中的两行 . 但是当我尝试通过调用js函数来分配实际数据时，我收到一个警告：

[Vue警告]：无法在undefined，null或原始值上设置反应属性：undefined

后跟一个错误：TypeError：'in'的右侧应该是一个对象，未定义[Weitere Informationen]

两者都在Vue.set的行....

function addPlant(pref, plantsgroup, plant) {
    data.push({id:uuidv4(), x:50,y:50 ,picref:pref+'.svg',picsize:40, plant:plant, plantsgroup:plantsgroup});

    Vue.set(vegbed.bedcomposition, data);

    
    updateBedContent();
}

当我尝试

Vue.set(vegbed, "bedcomposition", data);

相反，我根本没有反应 .

所以我觉得我有一个上下文/命名空间问题，但经过3小时的阅读和试错，我真的很沮丧 . 任何帮助，将不胜感激 .

javascript laravel-5 vue.js