Vue.js字符串数组响应式绑定失效问题求助

这是个很典型的Vue响应式原理问题，我来给你拆解清楚：

为什么当前代码不生效？ #

你遍历的是普通字符串数组，而字符串属于JavaScript的基本数据类型。在v-for="(string, index) in strings"循环里，string其实是原数组元素的值副本，不是引用。当你用v-model="string"绑定输入框时，修改的只是这个临时的副本变量，根本没触碰到原数组里的元素，所以数组数据和页面自然不会同步更新。

而你例子里的「Things」部分能正常工作，是因为它遍历的是对象数组——对象是引用类型，循环里的thing指向原数组里的对象本身，修改thing.name就是直接修改原数组对象的属性，自然能触发Vue的响应式更新。

两种可行的解决方案 #

方案1：把字符串数组改成对象数组（和「Things」逻辑对齐）

这种方式更符合Vue响应式的最佳实践，后续如果需要给每个元素添加更多属性也更灵活：

1. 修改data里的数组结构：

data() {
  return {
    strings: [
      { content: 'First string' },
      { content: 'Second string' }
    ]
  }
}

2. 调整模板的绑定逻辑：

<ul>
  <li v-for="(item, index) in strings" :key="index">
    <input v-model="item.content">
  </li>
</ul>

方案2：直接通过索引绑定原数组元素（无需修改数组结构）

如果不想改动原数组的格式，你可以跳过循环里的副本变量，直接绑定原数组对应索引的元素：

<ul>
  <li v-for="(string, index) in strings" :key="index">
    <input v-model="strings[index]">
  </li>
</ul>

这样输入框的修改会直接作用于strings数组的对应位置，Vue能检测到数组变化并同步更新视图。

补充说明 #

Vue 2.x对数组的响应式监听是通过重写push/pop/splice等数组方法实现的，直接修改数组索引（比如strings[0] = 'new value'）在某些场景下可能不会触发响应式，但用v-model="strings[index]"是可行的——因为v-model本质上绑定了@input事件，每次输入都会主动更新数组元素，Vue会强制触发视图更新。

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