如何在 vue js 中使用 watch 功能

Question

could you please tell me how to use watch function in vue js .I tried to used but I got this error.

vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m"

found in

---> <AddTodo>
       <Root>

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

I created different components and watch properties in the main component

var AddTODO = Vue.extend({
    template: '#add-todo',
    props: ['m'],
    data: function () {
        return {
            message: ''
        }
    },
    methods: {
        addTodo: function () {
            console.log(this.message)
            console.log(this.m);
            this.m =this.message;
        },
    },
});

When I try to add item I am getting this error. Step to reproduce this bug

1. Type anything on input field and click on Add button

Answer 1

this.m =this.message;

this line is the issue,

It's recommended that you don't modify prop directly...

instead create a data property and then modify it.

It shows warning because you're modifying the prop item, prop value will be overwritten whenever the parent component re-renders.

Answer 2

The component's props are automatically updated in the component as soon as you change their value outside of it. For this reason, trying to change the value of a property from inside your component is a bad idea: you should use the props as read-only. If you want to use a prop as the initial value of some of your component's data you can simply declare it this way:

data: function () {
    return {
        changeable: this.receivedProp;
    }
},

That being said, if you are trying to change the value of a prop from inside a component to be able to use your reassigned prop outside of it, you are doing it the wrong way. The way you should handle this is by using Vue's custom events . Remember, as Vue's documentation states:

In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events.