Ich versuche, generische Eingabekomponente zu erstellen

Question

Ich habe viele Formulare in einer Webanwendung zu erstellen, an der ich arbeite, für die ich Vue verwende, also habe ich versucht, eine generische Eingabekomponente zu erstellen, die ich verwenden kann während. Ich benutze Bootstrap-Grids, daher sollte ich in der Lage sein, der Komponente eine Anzahl von Spalten zu übergeben, ein Label, einen Namen und eine Eigenschaft, die als V-Modell verwendet werden. Ich denke, aber ich stoße auf ein Problem mit der Mutation von Requisiten - [Vue warn]: Vermeide es, eine Requisite direkt zu mutieren, da der Wert immer dann überschrieben wird, wenn die Parent-Komponente erneut rendert. Verwenden Sie stattdessen eine Daten oder eine berechnete Eigenschaft basierend auf dem Wert des Props. Prop wird mutiert: "Modell" (in der Komponente gefunden). Hier ist die Vorlage (in vereinfachter 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> 

Und hier ist der (wieder vereinfacht) 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); 
      } 
     } 

    } 


}); 

Dies aus einer anderen 'edit-Produkt' Komponente verwendet wird, wie folgt:

Dies zeigt OK, aber wirft den Fehler (oder genauer (ely, warning), wenn ich den Wert des Feldes bearbeite. Was mache ich falsch?

Answer 1

Wie die Warnung andeutet, sollten Sie die Prop, die Sie übergeben, nicht direkt bearbeiten.

Verwenden Sie diesen Wert als ursprünglichen Wert und setzen Sie einen separaten Wert für den Eingang, den Sie an das V-Modell übergeben können. Wenn Sie das übergeordnete müssen dann den aktuellen Wert haben auch eine Stütze passieren, dass Sie die param auf dem übergeordneten aktualisieren können, dh

Eingabekomponente

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

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

Eltern

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

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

Answer 2

Eigentlich ist die Lösung, die ich für gegangen bin, eher einfacher als die oben vorgeschlagene, sehr einfach in der Tat, aus https://forum-archive.vuejs.org/topic/4468/trying-to-understand-v-model-on-custom-components/9 übernommen.

Ich will nicht die Stütze 'Modells', ich habe einen 'Wert' einer statt, so dass der JS dazu geändert wird:

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

} 
}); 

Die Vorlage wird diese:

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

Und ich benutze es wie folgt aus:

Der Unterschied ist, dass ich nicht wirklich versuche, ein Modell Prop zu übergeben, ich bin nur einen Wert übergeben, und auf Änderungen an diesem Wert zu hören. Es scheint ziemlich gut zu funktionieren und ist sauber und einfach genug. Meine nächste Herausforderung besteht darin, eine willkürliche Menge von Attributen an die Eingabe zu übergeben, aber das ist das Thema einer anderen Frage.