I’m trying to learn vue.js. But code from official documentation not working. And I can’t find why. Vue tells that Property "PROPERTY_NAME" was accessed during render but is not defined on instance.
But this property defined in props of component, like in manual. I found, that from version 3.4 I should use defineModel and SFC, but for now it’s just a kind of complicated. I want simple way and in one index.html file for now, without export, one file – one component etc.
The code is:
<div id="app">
<test-component v-model:first-name="firstName" v-model:last-name="lastName"></test-component>
</div>
<script>
Vue.createApp({
components: {
'test-component' : {
props: {
firstName: String,
lastName: String
},
emits: [ 'update:firstName', 'update:lastName'],
template: `
<input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)"/>
<input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)"/>
`
}
}
}).mount('#app');
>Solution :
You aren’t initializing firstName and lastName anywhere, so essentially the value is not being written at all.
Add this code before the "components" property.
...
data(): {
firstName: '',
lastName: '',
},
...