Vue.js 3 - 从组件动态添加列表项

Vue.js 3 - Add list items from component dynamically

我是 vue 新手,我找到了一些例子,但我无法在我的情况下重现。 我有一些用户将填写的输入,一旦单击按钮,信息将填充项目列表。我正在尝试使用 OrderListItem 组件创建 < li >。但我收到此错误:

runtime-core.esm-bundler.js?5c40:217 Uncaught ReferenceError: machines is not defined at eval (OrderListItem.vue?fb66:14)

这是表格

<template>
<div>
    <div class="flex flex-col mb-4 md:w-full m-1">
        <label for="planter_model_id">Planter</label>
        <select v-model="registration.planter_model_id"  name="planter_model_id">
            <option disabled selected>Planter</option>
            <option v-for="planter in planters" :key="planter" :value="planter.id">{{planter.brand.name}} {{planter.name }}</option>
        </select>
    </div>
    <div class="flex flex-col mb-4 md:w-full m-1">
        <label class=" for="lines">Lines</label>
        <Input v-model="registration.lines"  type="number" name="lines" />
    </div>
    <Button type="button" @click="addItemOrder">Add</Button>
</div>
<div>
    <ul>
        <OrderListItem :machines="machines" />
    </ul>
<div>
</template>

这是我的代码

export default {
    components: {
        OrderListItem,
        Button,
    },
    props: {
        planters:{
            type:Array,
            required: true
        },
    },
    data() {
        return {
            machines: [], //this what I wish to be passed to OrderListItem component
            registration:{
                lines:null,
                planter_model_id:null,
            },
        }
    },
    methods:{ 
        addItemOrder(){
            let item = {}
            item.planter_model_id = this.registration.planter_model_id
            item.lines = this.registration.lines
            this.machines.push(item)
        }
    }
};

这是我在另一个文件上创建的 OrderListItem 组件:

<template>
    <li v-for="machine in machines" :key="machine">
        <div class="flex-initial w-3/5">
            <p>Planter: {{machine.planter_model_id}}</p>
            <p>Lines: {{machine.lines}}</p>
        </div>
    </li>
</template>
<script>

export default {
    name: 'OrderListItem',
    props:{
        machines,
    }
}
</script>

我不知道它是否相关,但我正在使用 vue3 和 laravel。 我在这里是个新手,从我学到的东西来看,我认为如果机器数组是一个道具,我就可以在我的组件上访问它。但是我会动态地添加 a 并从机器数组中删除 itens 并且我认为道具从服务器接收数据所以它不应该在那里声明,这就是为什么我在 data().

谢谢=)

您应该通过添加其类型和默认值来定义道具:

export default {
    name: 'OrderListItem',
    props:{
        machines:{type:Array,default:()=>[]},
    }
}