[Vuejs]-Vue v-model without setter

by

0👍

Use watchers instead of computed

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

In this way inputC is changing only if inputA or inputB were edited or inputC were edited manually by hand

0👍

Yep, you can use the watch option, check this example:

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>

Good luck!

Leave a comment