I have a Prop in my ponent 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 ponent 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 ponent so I'm not navigating to child or parent. I'm sure props have been reactive elsewhere in my code?

I have a Prop in my ponent 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 ponent 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 ponent so I'm not navigating to child or parent. I'm sure props have been reactive elsewhere in my code?

• javascript
• vue.js

Share Improve this question Follow asked Mar 26, 2019 at 15:34 AntGAntG 1,29422 gold badges2020 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Ok, it seems this is intended behaviour. According to the documentation https://v2.vuejs/v2/guide/ponents-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 ponent 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
      }
    }
   

Usually, ponents 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
  }
}