Trying to create generic input component

Question

I have a lot of forms to create in a web app I'm working on, for which I'm using Vue, so I've been trying to create a generic input component I can use throughout. I'm using Bootstrap grids, so the idea is that I should be able to pass the component a number of columns to take up, a label, a name and a property to use as the v-model. I'm kind of getting there, I think, but I'm running into a problem with mutating props - [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: "model" (found in component ). Here's the template (in simplified form):

 <template id="field">
<div v-bind:class="colsClass">

    <div class='form-group form-group-sm'>
        <label v-bind:for="name">{{labelText}}</label>

        <input v-bind:id='name' ref="input" class='form-control' v-bind:name='name' v-model='model'/>

    </div>
</div>

And here's the (again simplified) JS:

Vue.component('field', {

    template: '#field',

    props: ['cols','label','group','name','model'],


    computed:{
        colsClass:function(){
            return "col-xs-"+this.cols
        }
        ,
        labelText:function(){
            if(this.label) {
                return this.label
            } else {
                return _.startCase(this.name);
            }
        }

    }


});

This is used from within another 'edit-product' component, like this:

<field :cols="8" name="name" :model="product.name"></field>

This displays OK, but throws the error (or more accurately, warning), when I edit the value of the field. So what am I doing wrong?

Answer 1

Actually, the solution I've gone for is rather simpler than the one suggested above, very simple in fact, taken from https://forum-archive.vuejs.org/topic/4468/trying-to-understand-v-model-on-custom-components/9.

I don't want the 'model' prop, I have a 'value' one instead, so the JS is changed to this:

Vue.component('field', {

template: '#field',

props: ['cols','label','group','name','value'],


computed:{
    colsClass:function(){
        return "col-xs-"+this.cols
    }
    ,
    labelText:function(){
        if(this.label) {
            return this.label
        } else {
            return _.startCase(this.name);
        }
    }

}
});

The template becomes this:

    <div class='form-group form-group-sm'>
        <label :for="name">{{labelText}}</label>

        <input :id='name' :name='name' class='form-control' :value="value" @input="$emit('input', $event.target.value)"/>

    </div>
</div>

And I use it like this:

<field :cols="8" name="name" v-model="product.name"></field>

The difference is that I'm not actually trying to pass a model prop down, I'm just passing a value, and listening for changes to that value. It seems to work pretty well and is clean and simple enough. My next challenge is passing an arbitary set of attributes to the input, but that's the subject of another question.

Answer 2

As the warning suggests you should not directly edit the prop you are passing for the value.

Instead use this as the original value and set a seperate value on the input from it - which you can pass to the v-model. If you need the parent to have the current value then also pass a prop that will allow you to update the param on the parent, i.e.

input component

# script
props: [
  'origValue',
  'valueChange',
],
data: {
  inputValue: '',
  ...
},
mounted () {
  this.inputValue = this.origValue
},
watch: {
  inputValue () {
    this.valueChange(this.inputValue)
  },
  ...
},
...

# template
<input type="text" v-model="inputValue">

parent

# script
data () {
  return {
    fieldValue: 'foo',
    ...
  },
},
methods: {
  updateField (value) {
    this.fieldValue = value
  },
  ...
},
... 

# template
<field :value-change="updateField" :orig-value="fieldValue"></field>