vue js prop equal to v-model

Question

Why changes take affect on also props when I set v-model equal to props in mount hook.

export default{
  props: {
    initial_value: Array,
  },

  data(){
     return { component_value: [] }
  },

   mounted(){
     this.component_value = this.initial_value;
   }
}

So when I make some changes to component_value it also take affect on initial_value.

I wanted to write whole my code here but just tried make it short.

score 1 · Answer 1 · answered Jan 19 '20 at 16:07

1

Simplest way to do that is to clone your initial_value.

You can do that like this:

mounted() {
     this.component_value = JSON.parse(JSON.stringify(this.initial_value));
   }

This should work.

You can check more answers here.

answered Jan 19 '20 at 16:07

mare96

3,749
1
16
28

score 1 · Accepted Answer · answered Jan 19 '20 at 16:24

Change you code in mount hook, like this below

mounted() {
   this.component_value = JSON.parse(JSON.stringify(this.initial_value));
}

It will the value of this.initial_value variable not by just reference but by data of it. In JavaScript, a variable may store two types of data: primitive and reference. And this.initial_value has reference data since it's type is an array. For more explanation please read this article source

Ignacio · Answer 3 · 2020-01-19T16:37:10.610

0

export default{
  props: ['initial_value'],

  data(){
     return { component_value: this.initial_value }
  }

}

This should work.

EDIT:

If you are going to change the props continuisly (reactivity), you must use a computed property, like this

computed: { 
      component_value(){ 
           return JSON.parse(JSON.stringify(this.initial_value) 
          } 
   }

Regards

edited Jan 19 '20 at 16:37

answered Jan 19 '20 at 15:42

Ignacio

116
4

vue js prop equal to v-model

3 Answers3