Vue.js 3 - Add list items from component dynamically

Question

I am new to vue, I found some examples but I could not reproduce in my situation. I have some inputs user will fill out and once it clicks the button, the information will populate a list of items. I am trying to crete < li > with a OrderListItem component. But I am getting this error:

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

Here is the form

<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>

Here is my code

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)
        }
    }
};

And here is my OrderListItem component that I created on another file:

<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>

I don’t know if it is relevant but I am using vue3 and laravel. I am very newbie here and from what I learned I think if machines array was a prop I would be able to access it on my component. But I will dynamically add a and remove itens from machines array and I think props receive data from server so It should not be declared there, that why I declared inside data().

Thanks =)

Answer 1

You should define the prop by adding its type and default value :

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