不带setter的Vue v-model

Question

如何在没有setter的情况下使用vue计算的v-model？我有三个输入inputA，inputB和inputC，而inputC是从另外两个计算出来的。编辑inputC不应该影响inputA和vuetify的值，但应该与inputB同步，顺便说一句，我正在使用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
    }
}

这样，只有在手动编辑inputA或inputB或手动编辑inputC时，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>

​

祝好运!