Как vue наблюдает за изменением списка или v-модели

Question

Я пытаюсь просмотреть список, у которого есть подсписок, и некоторые <input> могут хорошо изменить подсписок.

<div id="app">
    <div v-for="sub in list">
        <div v-for="(v,idx) in sub">
            <input v-model="sub[idx]"/>
        </div>
    </div>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        list: [['one','two']]    
    },
    watch: {
        list: funtion(){
            console.log('change')
        }
    }
})
</script>

, когда я изменяю ввод, наблюдатель не работает

Answer 1

Выполните глубокое наблюдение , чтобы просмотреть вложенные изменения и запустить часы:

watch: {
   list: {
     handler() {
         console.log('change')
     },
     deep: true
   }
}

Интересно:

Если во вложенных данных есть одно из следующих часы будут не стрелять без deep часов:

• массив объектов (безусловно, самый распространенный)
• объект объектов
• объект массивов

Но если вложенные данные являются массивом массивов, как в вашем коде, Vue может его обнаружить. Это работало бы с исправленной опечаткой (как указано в ответе @ BorisK ниже).

Это несколько неожиданно, потому что мы думаем о Vue как о неспособном обнаружить глубокие изменения без deep часов, но это может с массивом массивов, а не только в шаблоне.

Demo

Answer 2

Замените funtion на function (вы забыли c)

Нажмите "Выполнить фрагмент кода" ниже, чтобы увидеть его в действии

new Vue({
  el: "#app",
  data: {
    list: [
      ['one', 'two']
    ]
  },
  watch: {
    list: function() {
      console.log('change');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div v-for="sub in list">
    <div v-for="(v,idx) in sub">
      <input v-model="sub[idx]" />
    </div>
  </div>
</div>