各位，我有很多个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>
您可以使用 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，因此所有输入框都会同步更新。
请注意，使用此模式，您不必在模板中为每个输入框定义一个单独的数据属性，因为它们都使用相同的计算属性和数据属性。
不好意思，问题没说明白。。
各位，我有很多个input， 后面带一个按钮，当我点击其中一个input后面的按钮时，只给这个input赋值，其他input不变。按钮需绑定同一个函数。
<template>
<input type="text" v-model:value="value1" style="width: 200px" />
<button @click="onClick(value1, 'a')">Submit</button>
<input type="text" v-model:value="value2" style="width: 200px" />
<button @click="onClick(value2, 'b')">Submit</button>
笨写法
<input type="text" v-model:value="value3" style="width: 200px" />
<button @click="onClick2(value3, 'c')">Submit</button>
<input type="text" v-model:value="value4" style="width: 200px" />
<button @click="onClick(value4, 'd')">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 = (key: any, value: string) => {
key.value = value
};
</script>
最简单的办法，利用渲染
首先，既然要给input赋值，那么肯定得需要v-model ,有几个input定义几个变量，分别绑定input，然后定义一个数组，需要几个button写几条数据，然后给每个button在写id，把button渲染，这么一来，点击事件肯定是一个，点击的时候判断id，id是1，给第一个input赋值，id是2，给第二个input赋值，这个方法最简单