Vue组件中El-input绑定数组对象字段无输入响应问题求助

问题根源 #

1. computed特性导致数据被重置：你用computed生成词汇列表，但computed会在依赖变化时重新执行回调，每次都生成全新的数组和对象，用户输入的answer会被重置为空，看起来就像输入框只读。
2. 对象属性无响应式：直接在普通对象里添加的answer字段不是Vue的响应式属性，Vue无法追踪它的变化，输入操作无法触发视图更新。
3. 冗余错误：代码中return的answer变量从未定义，属于无效代码。

修复方案 #

把vocabularies从computed改为ref，在组件挂载时初始化数据，确保每个词汇对象都是响应式的，且不会被重复生成：

<template>
  <div v-if="vocabularies.length">
    <div v-if="!isValidate">
      <el-row
        v-for="vocabulary in vocabularies"
        :key="vocabulary.id"
        justify="center"
        type="flex"
      >
        <el-col :span="2">
          <span class="spanish-value-label">{{ vocabulary.spanish }}</span>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="vocabulary.answer"
            class="valid-answer"
            placeholder="Put your answer here"
          />
        </el-col>
      </el-row>
      <el-row justify="center" type="flex">
        <el-button
          class="submit-button"
          plain
          @click="onSubmit"
        >
          Check vocabularies
        </el-button>
      </el-row>
    </div>
    <div v-else>
      <el-row
        v-for="vocabulary in vocabularies"
        :key="vocabulary.id"
        justify="center"
        type="flex"
      >
        <el-col :span="2">
          <span class="spanish-value-label">{{ vocabulary.spanish }}</span>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="vocabulary.answer"
            disabled
            placeholder="Put your answer here"
          />
        </el-col>
        <el-col :span="4">
          <el-icon
            v-if="vocabulary.answer === vocabulary.german"
            class="right-answer"
          >
            <Check />
          </el-icon>
          <el-icon v-else class="wrong-answer">
            <Close />
          </el-icon>
        </el-col>
      </el-row>
    </div>
  </div>
  <div v-else>
    <el-row justify="center" type="flex">
      <el-col :span="4">No vocabularies found</el-col>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import data from "@/assets/vocabularies.json";

export default defineComponent({
  setup: function () {
    const isValidate = ref(false);
    // 用ref初始化空数组
    const vocabularies = ref([]);

    onMounted(() => {
      // 在挂载时深拷贝数据并添加answer字段，确保每个对象都是响应式的
      vocabularies.value = data.map((vocabulary) => ({
        ...vocabulary,
        answer: ""
      }));
    });

    const onSubmit = () => {
      isValidate.value = !isValidate.value;
    };

    return {
      vocabularies,
      isValidate,
      onSubmit,
    };
  },
});
</script>

<style>
.submit-button {
  margin-top: 20px;
}
</style>

关键改动说明 #

• 将computed替换为ref([])，避免每次重渲染都生成新数组。
• 在onMounted中初始化词汇数据，只执行一次，确保用户输入不会被重置。
• 移除无效的answer变量，修正按钮上多余的onSubmit="{onSubmit}"属性。
• 将模板中的v-if="vocabularies"改为v-if="vocabularies.length"，判断逻辑更准确。

内容的提问来源于stack exchange，提问作者Marius von Kügelgen