汎用入力コンポーネントを作成しようとしています

Question

私は、私が使用しているWebアプリケーションでたくさんのフォームを作成しています。そのために私はVueを使用していますので、私は使用できる汎用入力コンポーネントを作成しようとしています全体を通して。私はブートストラップ・グリッドを使用しているので、コンポーネントはv-モデルとして使用するためにコンポーネントに複数の列、ラベル、名前、およびプロパティを渡すことができるはずです。親のコンポーネントが再レンダリングされるたびに値が上書きされるので、小道具を直接変更することは避けてください。[Vue警告]：小道具を変更すると問題に遭遇しています。代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用します。プロットが突然変異している：「モデル」 （コンポーネントにあります）。ここ は（簡略化した形で）テンプレートです：

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); 
      } 
     } 

    } 


}); 

これは、別の '編集製品' コンポーネント内から使用され、：

<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> 

そして、ここでは（再び、簡略化）JSです

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

これはOKと表示されますが、エラーをスローしますely、warning）フィールドの値を編集します。だから私は何が間違っているの？

Answer 1

値のために渡しているプロップを直接編集しないでください。

代わりに、これを元の値として使用し、入力から別の値を設定します。これをvモデルに渡すことができます。あなたは現在の値を持っている親が必要な場合は、その後もあなたが親でのparamを更新することができます小道具、すなわち

入力コンポーネント

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

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

親

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

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

を渡します

Answer 2

実際、私が行った解決策は、上に示唆した解決策よりもかなり簡単です。実際には、非常に単純です。https://forum-archive.vuejs.org/topic/4468/trying-to-understand-v-model-on-custom-components/9から取得しました。

私はJSはこれに変更されたので、私は、代わりに「価値」1を持って、「モデル」小道具をしたくない：

：テンプレートはこのなり

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); 
     } 
    } 

} 
}); 

<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> 

そして、私はこのようにそれを使用します。

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

違いは、私は実際には、モデルの小道具を渡すつもりはない、私はちょうど値を渡して、その値の変更を聞いています。それはかなりうまくいくようで、きれいで簡単です。私の次の課題は、任意の属性セットを入力に渡すことですが、それは別の質問の対象です。