Vue.js数组更新新值异常求助：addAnotherQuestion未正确更新

开发问卷构建器时，已确认服务器返回正确响应，但addAnotherQuestion数组的options字段始终不更新，无法渲染服务器返回的选项数据。以下是针对你提供代码的问题分析和修复方案：

核心问题分析 #

1. 直接修改对象新增属性导致响应式失效（原实现） #

原代码中从Vuex getter获取details后，直接给对象新增enableSingle等属性，但Vue无法自动检测对象新增的属性，即使你将details赋值给addAnotherQuestion，部分属性的更新可能无法触发视图渲染。此外，直接修改Vuex返回的对象也违背了单向数据流原则。

2. 引用赋值与数组结构错误（第二次尝试） #

• let resultQuestion = temp;是引用赋值，循环中所有迭代都会修改同一个temp对象，最终addAnotherQuestion2里的元素都是同一个对象，导致所有问题显示最后一条数据。
• this.addAnotherQuestion.push(addAnotherQuestion2)将数组嵌套推入，导致addAnotherQuestion结构变为[原对象, [问题1, 问题2]]，渲染时无法正确读取options。

修复方案 #

方案1：重构数据处理逻辑（推荐） #

通过创建新对象的方式，确保所有属性都具备响应式，同时遵循Vuex单向数据流：

getSurveyQuestion() {
  let params = { id: this.surveyId };
  let isDetailsFound = false;
  this.GET_SURVEY_QUESTION(params).then((result) => {
    if (result) {
      let details = this.questionList;
      if (details.length > 0) {
        isDetailsFound = true;
        // 映射服务器数据，合并默认属性并设置响应式
        const formattedQuestions = details.map(item => {
          // 合并默认模板与服务器返回数据
          const newQuestion = {
            // 默认模板属性
            enableSingle: false,
            enableMultiple: false,
            enableLong: false,
            enableScale: false,
            enableMatrix: false,
            enableMatrixMulti: false,
            enablePlain: false,
            disableOption: true,
            isOpen: false,
            scale: '0',
            rows: [
              { label: "ROW 1", id: 1 },
              { label: "ROW 2", id: 2 }
            ],
            columns: [
              { label: "COL 1", id: 1 },
              { label: "COL 2", id: 2 }
            ],
            // 用服务器数据覆盖默认值
            ...item
          };
          // 根据type设置对应的enable属性
          switch(item.type) {
            case 'single':
              newQuestion.enableSingle = true;
              break;
            case 'multiple_choice':
              newQuestion.enableMultiple = true;
              break;
            case 'open_text':
              newQuestion.enableLong = true;
              break;
            case 'distribution_scale':
              newQuestion.enableScale = true;
              break;
            case 'single_variant':
              newQuestion.enableMatrix = true;
              break;
            case 'multiple_variant':
              newQuestion.enableMatrixMulti = true;
              break;
            case 'plain_text_number':
              newQuestion.enablePlain = true;
              break;
          }
          return newQuestion;
        });
        // 直接替换整个数组，触发响应式更新
        this.addAnotherQuestion = formattedQuestions;
      }
    }
    if(!isDetailsFound){
      this.addAnotherQuestion[0].enableSingle = true;
    }
  });
}

方案2：修复第二次尝试的代码问题 #

如果要保留原有逻辑，需解决引用赋值和数组结构问题：

if (details.length > 0) {                       
  const addAnotherQuestion2 = [];   
  isDetailsFound = true;
  for (let i = 0; i < details.length; i++) {
    // 每次循环创建新对象，避免引用复用
    const resultQuestion = {
      ...this.addAnotherQuestion[0], // 复制默认模板
      ...details[i] // 覆盖服务器返回的属性
    };
    if (details[i].type === "single") {
      resultQuestion.enableSingle = true;
      resultQuestion.enableMultiple = false;
      resultQuestion.enableLong = false;
      resultQuestion.enableScale = false;
      resultQuestion.enableMatrix = false;
      resultQuestion.enableMatrixMulti = false;
      resultQuestion.enablePlain = false;   
    } else if (details[i].type === "multiple_choice") { 
      resultQuestion.enableSingle = false;
      resultQuestion.enableMultiple = true;
      resultQuestion.enableLong = false;
      resultQuestion.enableScale = false;
      resultQuestion.enableMatrix = false;
      resultQuestion.enableMatrixMulti = false;
      resultQuestion.enablePlain = false;   
    }
    addAnotherQuestion2.push(resultQuestion);     
  }
  // 直接替换数组，而非嵌套推入
  this.addAnotherQuestion = addAnotherQuestion2;
}

额外优化点 #

1. 模板渲染优化：options是数组，直接{{addItem.options}}会显示字符串形式，建议嵌套v-for渲染每个选项，同时用id作为key提升渲染性能：

<div v-for="(addItem, addItemIndex) in addAnotherQuestion" :key="addItem.id">
  {{addItem.question}}
  <div v-for="(option, idx) in addItem.options" :key="idx">
    {{option}}
  </div>
</div>

2. 数据校验：在赋值前打印console.log('details', details)，确认this.questionList中的options字段与服务器返回一致。

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