Vue3中如何监听v-for列表内指定输入框的变化

问题根源 #

你把所有输入框都绑定到了同一个inputValue响应式变量，导致任何一个输入框的内容变化都会同步到所有绑定该变量的输入框，这就是所有输入框同步显示的原因。

实现步骤 #

• 给inputs数组的每个对象添加独立的value属性，让每个输入框拥有专属的绑定值，避免共用变量引发的同步问题。
• 给非type="owl"的输入框设置disabled属性，禁止用户输入；如果不需要输入框样式，也可以替换为纯文本显示。
• 精准监听type="owl"的输入框对应的value变化，实现仅监听目标输入框的需求。

修改后的完整代码 #

<template>
  <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
    <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
      <div v-for="input in inputs" :key="input.label" class="sm:col-span-1">
        <dt class="text-sm font-medium text-gray-500">
          <div class="flex">
            <span>{{ input.label }}</span>
          </div>
        </dt>

        <dd class="mt-1 text-sm text-gray-900">
          <!-- 仅owl类型输入框可编辑，其他禁用 -->
          <input
            v-model="input.value"
            :disabled="input.type !== 'owl'"
          />
        </dd>
      </div>
    </dl>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const inputs = ref([
  { label: "Dog", type: "dog", value: "" },
  { label: "Cat", type: "cat", value: "" },
  { label: "Owl", type: "owl", value: "" },
  { label: "Rabbit", type: "rabbit", value: "" },
  { label: "Horse", type: "horse", value: "" },
]);

// 监听owl类型输入框的内容变化
watch(
  () => inputs.value.find(item => item.type === 'owl').value,
  (newVal) => {
    console.log(newVal);
  },
  { deep: true } // 开启深度监听，确保对象内部属性变化能被捕获
);
</script>

可选优化 #

如果不需要非owl输入框显示为输入框样式，可以把对应部分替换为纯文本：

<dd class="mt-1 text-sm text-gray-900">
  <template v-if="input.type === 'owl'">
    <input v-model="input.value" />
  </template>
  <span v-else>{{ input.value }}</span>
</dd>

内容的提问来源于stack exchange，提问作者JS_is_awesome18