Eu estou tentando aprender vue.js
. Mas o código da documentação oficial não funciona. E não consigo descobrir o porquê. Vue diz que Property "PROPERTY_NAME" was accessed during render but is not defined on instance.
mas esta propriedade é definida no props
componente, como no manual. Descobri que a partir da versão 3.4 eu deveria usar defineModel
e SFC, mas por enquanto é só meio complicado. Quero de forma simples e em um index.html
arquivo por enquanto, sem exportação, um arquivo - um componente etc.
O código é:
<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');