Level 14
:value
Nov 20, 2020
8
Level 3
How to set a default value to input with a v-model via HTML?
<input value="default value here"/>
Just that, as you guys know, Vue ignores the default value property when using v-model, i would like to know how can i set it via HTML? It's necessary when i want make a "edit" page and show all predefined values of the inputs, for example
Level 3
As i said in the post, vue ignores default value when using v-model, is not possible change it dynamically too, we get this error: Error message: 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.
Level 14
Let's see the whole code.
Level 28
It's hard to help you without the bigger picture, but that error means you're passing a prop to v-model, which is invalid because you cannot mutate a prop. You need to assign your prop value to a data property and pass that data property to the v-model.
Example
// In your script section
// ...
props: ['yourProp'],
data() {
return {
yourMutableVar: yourProp
}
}
// ...
// In your template
<input v-model="yourMutableVar">
1 like
Level 11
This shouldn’t be necessary, even for edit pages :)
Level 3
So, how can i set default value when showing a edit page where i have to show predefined values in inputs?
Level 11
Sorry for the late reply.
I usually do this in the mounted() hook, where I check for existence of the model, I can then populate each form item with the value from the model :)
Level 1
The simple way to achieve that is choosing the option you want to set as default and set it in your vue code
<select v-model = "riskRating">
<option value="HIGH">HIGH</option>
<option value="MEDIUM">MEDIUM</option>
<option value="LOW">LOW</option>
</select>
<input type="text" v-model="textField" />
data() {
return {
riskRating: 'MEDIUM',
textField: "Placeholder",
}
}
1 like
Please or to participate in this conversation.