I have two components: Parent and Child. The Parent has an array of cars
the Child is supposed push objects the cars
array. My problem is that my Child component turns cars
into an object, instead of pushing an object into the cars
array. My Parent component:
<template>
<child v-model=cars></child>
<ul>
<li v-for=car in cars>
{{ car.model }}
</li>
</ul>
</template>
export default {
data: function() {
return {
cars: []
}
}
}
My Child component:
<template>
<div>
<button type=button @click=addCar()>Add Car</button>
</div>
</template>
export default {
methods: {
addCar() {
this.$emit(input, { model: some car model })
}
}
}
Expected results:
cars
gets updated and becomes [{ model: some car model}, { model: some car model}, etc...]
Actual results:
cars
becomes an object {model: some car model}
Here is my fiddle:
https://jsfiddle.net/t121ufk5/529/
I assume something is wrong with the way i am using v-model
on my child component and/or the way I am emitting is incorrect. Can someone help? Thanks in advance!