Vuejs watch dynamic array element on change

Question

I'm creating this text editor, with the field of name, and address

<ckeditor :editor="editor" v-model="data[index].name">
<ckeditor :editor="editor" v-model="data[index].address.1">
<ckeditor :editor="editor" v-model="data[index].address.2">

and the data property

 data() {
    return {
        data:[],
        index:0,
        editor: customedit
    };
  },

the editor also have two button, next and back, with the method add and substracting "index". the data, is loaded before mount from server, with structure like this

serverdata = [{name:'name1',address:{1:'address 1',2:'address 2'}} , {name:'name2',address:{1:'address 4',2:'address 4'}}]

so what I want to do is, after data from server is loaded, user can move between data, and when user make change to it, the data index that user make change to will be logged. so far I have been using deep watcher like this:

watch: {
    data: {
      handler(val) {
          console.log('the data is changed');
          console.log(this.index + 1);
      },
      deep: true
    }
  },

but even when there are no change, when I click next, the log is shown, thanks for any help/suggestion

alpachino · Accepted Answer · 2021-04-21 07:40:45Z

1

Maybe you may compare new and old value if they are different do the console.log. You can receive two parameters in the function something like this:

handler(newValue, oldValue) {
         if(newValue !== oldValue) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

You can compare the content in the array with:

if(JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

Okay your problems seems you are receiving the same values in old and new values. You can try to watch a computed property and use that to convert array into string.Even with that string you can reconstruct the old array. I try to do a example:

data() {
    return {
        yourArray: []
    }
},
computed: {
    yourArrayStr: function () { 
        return JSON.stringify(this.yourArray)
    }
},
watch: {
    yourArrayStr: function(newValue, oldValue) {
        if(newValue !== oldValue){
            let oldValueArray = JSON.parse(oldValue);
            console.log();
            console.log();
        }
    },
}

edited Apr 21, 2021 at 7:40

answered Apr 21, 2021 at 7:18

alpachino

795 bronze badges

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

5 Comments

dhee Over a year ago

hi, thanks for the help, but weirdly it not working, when I check on console.log, both newValue and oldValue contain the newValue, so the condition was not met

dhee Over a year ago

"Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value." heres from vue documentation, so how could I track the change inside object?

dhee Over a year ago

thanks for the update, but still wont work, I think because what the documentation says, the oldval is same as newval

alpachino Over a year ago

I updated it again XD. Try it and say if work.

dhee Over a year ago

YES!!!! its work! omg, thank you very much,, been on this problem for more than 24 hours, and you solve it in 15 minutes,, :DDD

Collectives™ on Stack Overflow

Vuejs watch dynamic array element on change

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related