I recently embarked on my VueJS journey and attempted to implement v-model in a component, following an example I found.
<template>
<div class="date-picker">
Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()" />
Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()" />
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
updateDate() {
this.$emit('input', {
month: +this.$refs.monthPicker.value,
year: +this.$refs.yearPicker.value
})
}
}
};
</script>
In the parent component:
<template>
<div class="wrapper">
<date-picker v-model="date"></date-picker>
<p>
Month: {{date.month}}
Year: {{date.year}}
</p>
</div>
</template>
<script>
import DatePicker from './DatePicker.vue';
export default {
components: {
DatePicker
},
data() {
return {
date: {
month: 1,
year: 2017
}
}
}
})
</script>
I tried changing the name of props from ['value'] to ['abc'] and also updated the template like this:
Month: <input type="number" ref="monthPicker" :value="abc.month" @input="updateDate()" />
However, I encountered an error: TypeError: Cannot read property 'month' of undefined