v-model no component

1

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"

    
asked by anonymous 30.10.2017 / 18:23

0 answers