Using vue, I have five input fields for different categories. I want to pass each input field into one function, manipulate the value, and then assign the updated value to the original input name.
Issue is, I cannot figure out how to take the value of an input field, perform a function, and assign the revised value to the object associated with the input field.
Edit: Updated code with current efforts
<template>
<q-input
v-model="categoryOne"
name="categoryOne"
@change="onSelected($event, categoryOne)"
></q-input>
<q-input
v-model="categoryTwo"
name="categoryTwo"
@change="onSelected($event, categoryTwo)"
></q-input>
</template>
</script>
export default {
setup() {
let categoryOne = ref(null);
let categoryTwo = ref(null);
function onSelected(event, category) {
//how would I take the input of each category and perform an
action that updates the original value? The only way I can figure
this out is to do it one-by-one, which seems sloppy and loses a
lot
of intended functionality.
if (category === "categoryOne") { categoryOne.value =
categoryOne + 2 }
if (category === "categoryTwo") { categoryTwo.value =
categoryTwo + 2 }
}
}
</script>
I think I understand the question to be asking more about how cause two inputs to have side effects on one another, rather than the particulars of computing that side-effect.
The key is that UI controls can be bound bidirectionally to data via v-model. Below, input into one control side-effects the other.
var app = new Vue({
el: '#app',
data: {
valueA: '',
valueB: '',
},
methods: {
changeA() {
this.valueB = parseInt(this.valueA) + 2
},
changeB() {
this.valueA = parseInt(this.valueB) + 2
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1></h1>
<input type="text" v-model="valueA" @input="changeA()">
<input type="text" v-model="valueB" @input="changeB">
</div>Looking again after the question edit, maybe it is about the form of the side-effect, avoiding a list of conditionals. Lists of conditions are traditionally described by a series of if and optionally elseif blocks, with a switch. With literal objects and closures, a more succinct option is available.
Here's the snippet using that idea...
var app = new Vue({
el: '#app',
data: {
valueA: '',
valueB: '',
},
methods: {
change(inputCategory) {
// closures representing actions
const actions = {
one: () => this.valueB = +this.valueA + 2,
two: () => this.valueA = +this.valueB + 2
};
// execute the closure with a given key
actions[inputCategory]();
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1></h1>
<input type="text" v-model="valueA" @input="change('one')">
<input type="text" v-model="valueB" @input="change('two')">
</div>