In my parent Vue Page I'm calling a FormInput
inside my form
new.vue
<b-form @submit.prevent="submit">
<FormInput :name="name"/>
<b-button @click="submit">Save</b-button>
<b-form>
<script>
import FormInput from '~/components/Insiders/FormInput';
export default {
components: {
FormInput
},
data() {
return {
name: 'User A'
}
},
methods: {
submit(event) {
console.log(this.name)
}
}
}
</script>
components/Insiders/FormInput.vue
<b-form-input v-model="name" type="text"></b-form-input>
<script>
export default {
props: {
name: { type: String, required: true }
}
}
</script>
I'm getting an error: 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: "name"
What I'm expecting here is when I change the value in the input from new.vue I should be able to console.log the new value of name when I click the submit button.
How can I solve this?