javascript - vue.js 在 v-repeat 中观察数组变量

Question

我正在尝试使用 v-repeat 观察绑定(bind)到重复元素的数组中的变量，但它似乎不起作用。有一把 fiddle here

我的 HTML 看起来像这样

<div id="test">
    <div v-repeat="details">
        <select v-model="hour">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
    <pre>
          {{ $data | json }}
    </pre>
</div>

和这样的vue js

new Vue({
        el: '#test',
        data: {
            details: [
                { 
                    hour: 2,
                    changeThis: null
                },
                { 
                    hour: 3,
                    changeThis: null
                }
            ],
        },
        watch: {
            'details': function (val, oldVal) {
                alert()
            },
        }
})

与小时属性的绑定(bind)工作正常，但我无法启动 watch 。我也试过 deep: true 但这也不管用。如果我将 watch 定义为

watch: {
    'details[0].hour' 

然后我就可以让它工作了，但是因为我不知道我会有多少细节，所以我真的不想对每个细节都这样做。我理想地想要做的是获取对正在更新的数组项的引用，然后从那里开始。我可以通过添加

来实现我想要的

v-on="change:someVar(detail)" 

选择元素并以这种方式进行，但我很好奇为什么我尝试的方法不起作用。

编辑实际上可以通过使用深度观察器返回完整数组，如下面的@kishanterry 注释(谢谢你)，我在文档中忽略了这个语法。但是它仍然没有完全给出我希望的解决方案

// deep watcher
    'c': {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }

Answer 1

试试这个

new Vue({
 el: '#test',
 data: {
  details: [{
    hour: 2,
    changeThis: null
   },
   {
    hour: 3,
    changeThis: null
   }
  ],
 },
 watch: {
  details: {
   handler: function(val, oldVal) {
    alert('')
   },
   deep: true
  }
 }
})

如果我在您的 js fiddle 中替换它，它就可以工作。我认为这就是您所需要的。 Js Fiddle Link