vue.js 监视 v-repeat 中的数组变量答案

【问题标题】：vue.js watch array variable within v-repeatvue.js 监视 v-repeat 中的数组变量
【发布时间】：2015-11-02 21:49:52
【问题描述】：

我正在尝试使用 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()
            },
        }
})

与小时属性的绑定工作正常，但我无法启动手表。我也尝试过 deep: true 但这也不起作用。如果我将手表定义为

watch: {
    'details[0].hour'

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

来实现我想要的

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

到选择元素并这样做，但我很好奇为什么我尝试的方法不起作用。

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

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

【问题讨论】：

我试过你在文档中的选项：link 但似乎 watcher 返回了它的 变量的 copy观看（不是参考），即使 deep 选项设置为 true，整个 watched 数组也会作为 val传递>。最好的办法是使用v-on="change: ..." 事件监听格式
@kishanterry 感谢您的浏览。我实际上忽略了 deepwatcher 的语法，这可能会给我一些我需要的东西。但正如你所说，最好还是回到 v-on
你到底想在观察者回调中做什么？
@EvanYou 也许 v-on="change:someVar(detail)" 是一条更好的路线，但我希望以某种方式获取数组中已更改然后更改的项目其中的一些价值。例如，如果“小时”发生变化，那么我想对相邻的“changeThis”属性做一些事情
听起来你最好把重复的项目变成一个组件！

标签： javascript vue.js

【解决方案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

【讨论】：