Within my parent Vue Page, I have inserted a FormInput component 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 am encountering 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"
My expectation is that when I modify the input value in new.vue, I should be able to log the new value of name upon clicking the submit button.
How can this issue be addressed?