I'm trying to use v-model inside a component but it does not work.
Code main.js, which will have the information used in the v-model:
import Vue from 'vue'
new Vue({
el: '#app',
data: {fields: {name: 'Vittar', age: 24}}
})
My component code:
import Vue from 'vue'
Vue.component('dynamic-field', {
props: ['value'],
template: '<input type="text" :value="value" v-model="value">',
})
In case I would pass the fields.name property in the prop value of my input and would use that same prop in v-model as it appears in the component code:
props: ['value'],
template: '<input type="text" :value="value" v-model="value">',
HTML:
<dynamic-field :value="fields.name"></dynamic-field>
But it does not work, it gives the following error:
[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: "value"