Svelte数组内对象绑定异常：数组未更新、嵌套绑定报错

你的问题完全是数组访问语法错误，和Svelte的绑定机制无关，Svelte完全支持数组内嵌套对象的双向绑定。

第一个问题：数组元素未更新的原因 #

你写的bind:value={array.first}并不是访问数组中第一个对象的first属性，而是给array这个数组对象本身添加了一个名为first的自定义属性：

• JS中数组本质也是对象，可以自由添加非索引属性，所以修改输入框时，只是给array对象新增了first属性并更新它，数组内部的元素（array[0]、array[1]）完全没变化
• 你看到的array.first显示正确，其实是这个新增的属性，而非数组元素里的first

正确写法 #

要访问数组内的对象属性，必须通过数组索引定位元素：

<script>
let array = [
    {id: 1, first: "x"},
    {id: 2, second: "y"}
];
</script>

<!-- 访问数组第一个元素的first属性 -->
<input type="text" bind:value={array[0].first}/>

此时修改输入框，array[0].first会同步更新，console.log(array)也能看到数组元素的变化。

第二个问题：嵌套对象绑定报错的原因 #

你写的array.first.value存在两层错误：

1. 没有通过索引访问数组元素，array.first是数组对象的自定义属性（初始不存在，所以是undefined）
2. 即使定位到数组第一个元素，它的first属性是一个数组，需要再通过索引访问内部的value

正确写法 #

<script>
let array = [
    {id: 1, first: [{id: 1, value: "x"}]},
    {id: 2, second: [{id: 1, value: "y"}]}
];
</script>

<!-- 先取数组第一个元素，再取其first数组的第一个元素的value属性 -->
<input type="text" bind:value={array[0].first[0].value}/>

这样绑定就不会抛出undefined错误，修改输入框也能同步更新嵌套对象的值。

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