vue.js在v-repeat中监视数组变量

Question

我试图在一个数组中观察一个变量,该变量使用v-repeat绑定到重复元素,但它似乎不起作用.有一个小提琴在这里

我的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()
            },
        }
})

与小时属性的绑定工作正常,但我不能让手表开火.我也尝试过深刻:真实但不起作用.如果我将手表定义为

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 小提琴中替换它，它就可以工作。我认为这就是你所需要的。 Js小提琴链接