Usando vue, tengo cinco campos de entrada para diferentes categorías. Quiero pasar cada campo de entrada a una función, manipular el valor y luego asignar el valor actualizado al nombre de entrada original.
El problema es que no puedo entender cómo tomar el valor de un campo de entrada, realizar una función y asignar el valor revisado al objeto asociado con el campo de entrada.
Editar: código actualizado con los esfuerzos actuales
<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>Creo que entiendo que la pregunta es más sobre cómo hacer que dos entradas tengan efectos secundarios entre sí, en lugar de los detalles de calcular ese efecto secundario.
La clave es que los controles de la interfaz de usuario se pueden vincular bidireccionalmente a data a través v-model . A continuación, la entrada en un control afecta al otro.
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> Mirando nuevamente después de la edición de la pregunta, tal vez se trate de la forma del efecto secundario, evitando una lista de condicionales. Las listas de condiciones se describen tradicionalmente mediante una serie de bloques if y, opcionalmente, elseif , con un interruptor. Con objetos literales y cierres, está disponible una opción más sucinta.
Aquí está el fragmento usando esa 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>