使用一个函数为不同的输入字段获取值和设置新值

Question

使用 vue，我有五个不同类别的输入字段。我想将每个输入字段传递给一个函数，操作值，然后将更新后的值分配给原始输入名称。

问题是，我无法弄清楚如何获取输入字段的值、执行功能并将修改后的值分配给与输入字段关联的对象。

编辑：用当前的努力更新了代码

<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>

Answer 1

我认为我理解的问题是更多地询问如何导致两个输入对彼此产生副作用，而不是计算该副作用的细节。

关键是UI控件可以通过v-model双向绑定到data。下面，输入一个控件会产生另一个副作用。

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>

在问题编辑后再次查看，可能是关于副作用的形式，避免使用条件列表。条件列表传统上由一系列if 和可选的elseif 块描述，带有一个开关。使用文字对象和闭包，可以使用更简洁的选项。

这是使用这个想法的 sn-p...

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>