javascript - vue监视子列表如何更改或v-model

Question

我尝试查看具有子列表的列表，一些<input>可以很好地更改子列表。

<div id="app">
    <div v-for="sub in list">
        <div v-for="(v,idx) in sub">
            <input v-model="sub[idx]"/>
        </div>
    </div>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        list: [['one','two']]    
    },
    watch: {
        list: funtion(){
            console.log('change')
        }
    }
})
</script>

，当我修改输入时，观察者无法使用

Answer 1

进行deep watch以便观察嵌套的更改并触发监视:

watch: {
   list: {
     handler() {
         console.log('change')
     },
     deep: true
   }
}

有趣:
如果嵌套数据为以下任意一项，则在没有 deep监视的情况下，监视将以 而不是触发:

对象数组(迄今为止最常见)

对象的

对象
数组

的

对象

但是，如果嵌套数据是数组数组(如您的代码中所示)，则Vue可以检测到它。它可以解决拼写错误(如下面@BorisK的答案所述)。
这有点出乎意料，因为我们认为Vue在没有deep监视的情况下无法检测到深层更改，但是它可以使用数组数组，而不仅仅是模板中。
Demo