Vue.js watcher to duplicate inputs giving null reference

Question

I'm attempting to establish a watcher in Vue.js to duplicate an input conditionally. Using the value property, I keep experiencing null references, will someone elaborate to why this may be so I may better understand the issue?

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>

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

Console 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

tony19 · Accepted Answer · 2022-07-16 01:52:09Z

1

The v-model directive is used to create two-way data bindings.

Instead of doing this.communicationsName.value just do this.communicationsName.

The data property communicationsName already holds the value you are looking for, it is not an HTMLInputElement instance for it to have a value property.

Try the following:

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

Note: The if condition this.legalName == this.communicationsName might not be necessary. The data properties already have the same value.

edited Jul 16, 2022 at 1:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 25, 2019 at 15:48

Ricky Ruiz

27k7 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricky Ruiz Over a year ago

You could show a warning to let the user know the values are different and let them decide if that is okay or they fix it. I will update the answer, do not use == null in the if condition, we'll check for a falsy value instead. If you type into an input and then erase everything, the value will be an empty string and the condition will fail.

arora · Accepted Answer · 2019-04-25 15:07:16Z

1

Use Computed Properties instead.

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

You can tweak this code as per your use case.

answered Apr 25, 2019 at 15:07

arora

8697 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vue.js watcher to duplicate inputs giving null reference

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related