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