Vue JS动态追加HTML内容及API多循环加载异常求助

这种情况我碰到过好几次，核心问题基本都是Vue响应式系统没检测到数据更新，尤其是涉及多轮循环加载数据的时候，特别容易踩这个坑。下面给你几个针对性的解决方案：

1. 确保数据是响应式的，避免直接修改原对象/数组 #

Vue2的响应式系统对数组的直接索引修改、对象的新增属性是不敏感的。如果你的API返回数据后，是直接通过this.data[index] = xxx或者给对象加新属性的方式赋值，textarea这类元素就可能不更新。

举个例子，正确的做法应该是：

• 数组更新用Vue提供的方法：this.$set(this.array, index, newValue) 或者 this.array.splice(index, 1, newValue)
• 对象新增属性用：this.$set(this.obj, 'key', value) 或者直接替换整个对象：this.obj = {...this.obj, newKey: newValue}

假设你的数据结构是这样的：

data() {
  return {
    formData: {
      selectValue: '',
      textareaContent: '',
      buttonStatus: false
    }
  }
}

当API返回数据后，不要直接this.formData.textareaContent = res.data.content（如果这个属性是后来新增的就会有问题），而是用：

this.$set(this.formData, 'textareaContent', res.data.content)
// 或者直接替换整个对象，更稳妥
this.formData = {...this.formData, ...res.data}

2. 异步加载后强制更新DOM（兜底方案） #

如果上面的方法没用，可能是数据更新了但DOM没来得及渲染，这时候可以手动触发Vue的更新：

// 在数据赋值完成后调用
this.$nextTick(() => {
  this.$forceUpdate()
})

不过$forceUpdate是兜底手段，尽量先用第一种方法，因为强制更新会跳过响应式检测，可能带来其他问题。

3. 检查v-model的绑定是否正确 #

确保你的textarea和按钮的绑定是正确的：

• textarea的v-model要绑定到响应式数据上，比如<textarea v-model="formData.textareaContent"></textarea>
• 按钮的状态（比如disabled）要绑定到响应式属性，比如<button :disabled="formData.buttonStatus">提交</button>

如果你的HTML结构里是循环渲染的多个元素（因为你提到多轮循环加载），还要确保每个元素的:key是唯一的，避免Vue复用DOM导致的更新异常：

<div v-for="(item, index) in items" :key="item.id"> <!-- 用唯一id当key，不要用index -->
  <select v-model="item.selectValue"></select>
  <textarea v-model="item.textareaContent"></textarea>
  <button :disabled="item.buttonDisabled">操作</button>
</div>

4. 多轮循环加载时的注意事项 #

如果是多次循环请求API并累加数据，不要直接this.items.push(...newItems)（虽然push是响应式的，但如果newItems里的对象是未被响应式处理的，内部属性更新还是会有问题），应该把每个新对象都转成响应式的：

// 假设newItems是API返回的数组
this.items = [...this.items, ...newItems.map(item => ({...item}))]
// 或者用Vue.observable处理每个对象
import Vue from 'vue'
this.items.push(...newItems.map(item => Vue.observable(item)))

你可以先检查一下自己的代码是不是踩了上面的某一个坑，尤其是响应式数据的赋值方式，这是最常见的原因。

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