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:()=>[]},
}
}
我是 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:()=>[]},
}
}