Vue.js观察者重复输入以提供空引用

Question

我试图在Vue.js中建立观察者以有条件地复制输入。使用value属性，我会不断遇到null引用，有人会详细说明为什么会这样，以便我可以更好地理解该问题吗？我的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

         }

     },

});

您可以根据用例调整此代码。