Mit einem leicht anderen Ansatz als die anderen Antworten Ich denke, Sie können etwas erreichen, das leicht sca ist label.
Dies ist ein erster Durchlauf, aber unter Verwendung von Komponenten könnten Sie Ihre eigenen Eingabeelemente erstellen, die genau dann übermittelt wurden, wenn Sie es wollten. Hier ist ein Beispiel eines Eingabeelements, das wie ein reguläres Eingabeelement funktioniert, wenn es außerhalb einer t-form Komponente liegt, aber nur v-model auf submit aktualisiert wird, wenn es sich in einem t-form befindet.
Vue.component("t-input", {
props:["value"],
template:`
<input type="text" v-model="internalValue" @input="onInput">
`,
data(){
return {
internalValue: this.value,
wrapped: false
}
},
watch:{
value(newVal){
this.internalValue = newVal
}
},
methods:{
update(){
this.$emit('input', this.internalValue)
},
onInput(){
if (!this.wrapped)
this.$emit('input', this.internalValue)
}
},
mounted(){
if(this.$parent.isTriggeredForm){
this.$parent.register(this)
this.wrapped = true
}
}
})
Hier ist ein Beispiel für t-form.
Vue.component("t-form",{
template:`
<form @submit.prevent="submit">
<slot></slot>
</form>
`,
data(){
return {
isTriggeredForm: true,
inputs:[]
}
},
methods:{
submit(){
for(let input of this.inputs)
input.update()
},
register(input){
this.inputs.push(input)
}
}
})
Mit diesen Funktionen wird Ihre Arbeit sehr einfach.
<t-form>
<t-input v-model="text"></t-input><br>
<t-input v-model="text2"></t-input><br>
<t-input v-model="text3"></t-input><br>
<t-input v-model="text4"></t-input><br>
<button>Submit</button>
</t-form>
Diese Vorlage aktualisiert nur die gebundenen Ausdrücke, wenn auf die Schaltfläche geklickt wird. Sie können so viele t-inputs haben, wie Sie möchten.
Hier ist ein Arbeitsbeispiel. Ich habe t-input Elemente innerhalb und außerhalb des Formulars enthalten, so dass Sie sehen können, dass innerhalb des Formulars das Modell nur beim Senden aktualisiert wird und außerhalb des Formulars die Elemente wie eine typische Eingabe funktionieren.
console.clear()
//
Vue.component("t-input", {
props: ["value"],
template: `
<input type="text" v-model="internalValue" @input="onInput">
`,
data() {
return {
internalValue: this.value,
wrapped: false
}
},
watch: {
value(newVal) {
this.internalValue = newVal
}
},
methods: {
update() {
this.$emit('input', this.internalValue)
},
onInput() {
if (!this.wrapped)
this.$emit('input', this.internalValue)
}
},
mounted() {
if (this.$parent.isTriggeredForm) {
this.$parent.register(this)
this.wrapped = true
}
}
})
Vue.component("t-form", {
template: `
<form @submit.prevent="submit">
<slot></slot>
</form>
`,
data() {
return {
isTriggeredForm: true,
inputs: []
}
},
methods: {
submit() {
for (let input of this.inputs)
input.update()
},
register(input) {
this.inputs.push(input)
}
}
})
new Vue({
el: "#app",
data: {
text: "bob",
text2: "mary",
text3: "jane",
text4: "billy"
},
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<t-form>
<t-input v-model="text"></t-input><br>
<t-input v-model="text2"></t-input><br>
<t-input v-model="text3"></t-input><br>
<t-input v-model="text4"></t-input><br>
<button>Submit</button>
</t-form>
Non-wrapped:
<t-input v-model="text"></t-input>
<h4>Data</h4>
{{$data}}
<h4>Update Data</h4>
<button type="button" @click="text='jerome'">Change Text</button>
</div>
Danke, aber die gleiche Frage wie bei @DecadeMoon: Was, wenn ich die 'displayVals' von einer anderen Methode ändern möchte? Die Eingabefelder werden nicht automatisch aktualisiert. Wie bind 'displayVals' an' inputVals' mit scale? – niutech
Meinst du, du willst "displayVals" nach dem Aufruf von 'update' dauerhaft an' inputVals' binden? – thanksd
Ich möchte, dass die "Quelle der Wahrheit" 'displayVals' ist und ich möchte sie nicht nur durch Übermitteln des Formulars ändern, sondern auch von anderen Methoden. Aber dann möchte ich, dass die aktualisierten 'displayVals' automatisch in den Eingängen angezeigt werden, und der Benutzer kann sie bearbeiten und erst nach dem Klicken auf den Submit-Button sollten sie aktualisiert werden. Dies wäre ein einfacher Anwendungsfall für "V-Modell", wenn Werte bei jedem Tastendruck aktualisiert würden, was in meiner Situation nicht der Fall ist. – niutech