各位，vue 如何用同一个函数为不同的输入框赋值

Question

各位，我有很多个input， 后面带一个按钮，当我点击其中一个input后面的按钮时，只给这个input赋值，其他input不变。按钮需绑定同一个函数。

<template>
    <input type="text" v-model:value="value1" style="width: 200px" />
    <button  @click="onClick(value1)">Submit</button>
      <input type="text" v-model:value="value2" style="width: 200px" />
    <button  @click="onClick(value2)">Submit</button>
      笨写法
<input type="text" v-model:value="value3" style="width: 200px" />
    <button  @click="onClick2(1)">Submit</button>
      <input type="text" v-model:value="value4" style="width: 200px" />
    <button  @click="onClick(2)">Submit</button>
</template>
<script lang="ts" setup>
import { ref, triggerRef } from 'vue';
let value1 = ref<string>('');
const value2 = ref<string>('');
const value3 = ref<string>('');
const value4 = ref<string>('');
const onClick = (searchValue: string) => {
  searchValue = 'ssss';//不起作用
};
//笨写法
const onClick2 = (num: number) => {
  switch (num) {
    case 1:
      value3.value = "s"
      break;
    case 2:
      value4.value = "a"
      break;
  }
};
</script>

Answer 1

您可以使用 v-model 指令结合计算属性来为多个输入框绑定同一个函数。

首先，为了将多个输入框绑定到同一个计算属性上，您需要使用 v-model 指令将每个输入框与同一个变量绑定。例如：

<input type="text" v-model="myValue" />
<input type="text" v-model="myValue" />
<input type="text" v-model="myValue" />

接下来，在 Vue 组件的 computed 选项中定义一个计算属性来设置 myValue 的值。您可以使用此计算属性来为每个输入框提供一个单一的数据源：

computed: {
  myValue: {
    get() {
      return this.sharedValue;
    },
    set(newValue) {
      this.sharedValue = newValue;
    },
  },
},
data() {
  return {
    sharedValue: '',
  };
},

在上面的代码中，myValue 计算属性使用 sharedValue 数据属性作为其源。在获取器函数中，它返回 sharedValue 的值，而在设置器函数中，它将 sharedValue 设置为新值。这意味着无论哪个输入框更新了 myValue，它们实际上都在更新 sharedValue，因此所有输入框都会同步更新。

请注意，使用此模式，您不必在模板中为每个输入框定义一个单独的数据属性，因为它们都使用相同的计算属性和数据属性。