Question

如何在不使用setter的情况下使用vue计算的v模型？我有三个输入inputA，inputB和inputC，而inputC是从其他两个输入中计算出来的。编辑inputC不应影响inputA和inputB的值，而应与{{ inputC }}同步，并且顺便说一下，我正在使用vuetify。

<v-text-field v-model="inputA"></v-text-field>
<v-text-field v-model="inputB"></v-text-field>
<v-text-field v-model="inputC"></v-text-field>
{{ inputA }}, {{ inputB }}, {{ inputC }}

....
data () {
  return {
    inputA: '',
    inputB: ''
  }
},
computed: {
  inputC () {
    return this.inputA + ' ' + this.inputB
  }
}

Answer 1

使用watchers代替computed

watch: {
    inputA: function() {
        this.inputC = this.inputA + this.inputB
    },
    inputB: function() {
        this.inputC = this.inputA + this.inputB
    }
}

仅当inputC或inputA被编辑或手动inputB被手动编辑时，inputC才改变

Answer 2

是的，您可以使用watch选项，请查看以下示例：

Vue.component('v-text-field', {
	template: `<input v-model='data' type="text"
   v-on:change="$emit('change', $event.target.value)">`,
	model:  {
		prop: 'data',
		event: 'change'
	},
	props: {
		data: {default: ''}
	}
});

var vm = new Vue({
	el: '#app',
	data: {
		inputA: 'val a',
		inputB: 'val b',
		inputC: ''
	},
	watch: {
		inputA: function(val) {
			this.inputC = val + '-' + this.inputB;
		},
		inputB: function(val) {
			this.inputC = this.inputA + '-' + val;
		}
	}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id='app'>
   <v-text-field v-model='inputA'></v-text-field>
   <v-text-field v-model='inputB'></v-text-field>
   <h3>{{ inputC }}</h3>
</div>

祝你好运！

不带二传手的Vue V模型

2 个答案: