Vue.js наблюдатель для дублирования ввода, давая нулевую ссылку

Question

Я пытаюсь установить наблюдателя в Vue.js для условного дублирования ввода.Используя свойство value, я продолжаю испытывать пустые ссылки. Кто-нибудь уточнит, почему это так, чтобы я мог лучше понять проблему?

Мой HTML:

<div id="company-form">
    <label>Name</label>
    <input v-model="legalName" type="text"/>
    <label>Name To Call</label>
    <input v-model="communicationsName" />                      
</div>

Мой код Vue:

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;                       
            }
         }
     },
});

Ошибки консоли:

[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

Answer 1

Директива v-model используется для создания двусторонних привязок данных.

Вместо выполнения this.communicationsName.value просто выполните this.communicationsName.

Свойство data communicationsName уже содержит искомое значение, оно не является экземпляром HTMLInputElement, чтобы иметь свойство value.

Попробуйте выполнить следующее:

watch: {
    legalName: function() {
        //Check to see if communicationsName's value is null or equal to legalName's value before duplicating input field text
        if (!this.communicationsName || this.legalName == this.communicationsName) {
            this.communicationsName = this.legalName;                       
        }
     }
 },

Примечание. Условие if this.legalName == this.communicationsName может быть необязательным.Свойства данных уже имеют одинаковое значение.

Answer 2

Используйте Computed Properties вместо.

new Vue({
    el: '#company-form',
    data: {
        communicationsName: null,
    },
    computed: {
        legalName() {
           return this.communicationsName
         }
     },
});

Вы можете настроить этот код в соответствии с вашим вариантом использования.