V Model Value

Posted on  by admin

Modified1 year, 8 months ago. I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning.

The warning says:. "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: "value". So I changed and now I'm using a data as the warning says.

So now the code it's not working and the warning says:.


"Property or method "_value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option".

Any idea how to fix the first code to suppress the warning?

# 下一步

(or some idea on how to fix the second code?). Obs.: b-form-input it's not my componente, this is the Textual Input from Boostrap-Vue (Doc for b-form-input).

33 gold badges99 silver badges1212 bronze badges. 1212 bronze badges. Answer is from https://github.com/vuejs/vue/issues/7434. Props are read-only, but you are trying to change its value with v-model.

In this case, if you change the input value, the prop is not modified and the value is restored on the next update.

# 介绍

Use a data property or a computed setter instead:. 88 gold badges5959 silver badges6060 bronze badges.

6060 bronze badges. Bert addresses your direct issue, but I think you should also know that your approach is a bit off.

Since ultimately you are sending the new value to postPost, you don't really need to modify your local copy.

Use the event object that is sent to the change handler to get the current value from the input.

Instead of v-model, just use :value, and don't include the invocation parentheses when specifying the change handler. 88 gold badges6969 silver badges9595 bronze badges.

9595 bronze badges. 158158 bronze badges. 10.3k22 gold badges1919 silver badges2727 bronze badges. 1919 silver badges2727 bronze badges. Point your input v-model directive to a data property named value_ (or any other name not starting with prefixes _ or $ which are reserved by Vue).

Set the data property's default value to null. Then, add a method getValue() which will set property value_ based on your value prop's value.