Why is this Vue prop not reacting to change?

0
votes

I have a Prop in my component that is a User object, I then have this function:

    onChange: function(event){
        this.$v.$touch();
        if (!this.$v.$invalid) {
            this.$axios.put('update',{
                code:this.user.code,
                col:event.target.name,
                val:event.target.value  
            }).then(response => {
                this.user[event.target.name]=event.target.value
            });
        }
    }

I can see in the Vue console debugger that the correct attribute has been updated, this attribute exists when the component is created but the template where I reference it does not refresh: 

<p>Hi {{user.nickname}}, you can edit your details here:</p>

This is all within the same component so I'm not navigating to child or parent. I'm sure props have been reactive elsewhere in my code?

2
javascriptvue.js

2 Answers

3
votes

Ok, it seems this is intended behaviour. According to the documentation https://vuejs.org/v2/guide/components-props.html in the scenario that I have it should be handled as:

  1. The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards. In this case, it’s best to define a local data property that uses the prop as its initial value:

    props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
1
votes

Usually components should be reactive to Props, though i have had experiences where it was non-reactive so i added the prop to a watcher and put the functional call there.

props: ["myProp"],
watch:{
  myProp(){
     // ... your functions here
  }
}