Question

我正在尝试使用v-repeat观察数组中与变量元素绑定的变量，但它似乎无法正常工作。有一个小提琴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()
            },
        }
})

与小时属性的绑定工作正常，但我无法启动手表。我也尝试过深刻：真实但不起作用。如果我将手表定义为

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 Fiddle Link

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

1 个答案: