I'm currently facing an issue in Vue.js while trying to set up a watcher for duplicating an input based on certain conditions. I keep encountering null references when using the value property, and I would appreciate it if someone could explain why this is happening so I can gain a better understanding of the problem.
Here is my HTML:
<div id="company-form">
<label>Name</label>
<input v-model="legalName" type="text"/>
<label>Name To Call</label>
<input v-model="communicationsName" />
</div>
This is my Vue code:
new Vue({
el: '#company-form',
data: {
legalName: null,
communicationsName: null,
},
watch: {
legalName: function() {
if (!this.communicationsName.value || this.legalName.value == this.communicationsName.value) {
this.communicationsName.value = this.legalName.value;
}
}
},
});
Upon checking the console, I found these errors:
[Vue warn]: Error in callback for watcher "legalName": "TypeError: Cannot read property 'value' of null"
vue.js:18 TypeError: Cannot read property 'value' of null