アレイが変更されたときにVueJS domがリフレッシュされない

Question

"sortable"というカスタムディレクティブがありますが、DOMに問題がありました。問題は、配列を変更したDOMをドラッグアンドドロップしたときですが、DOMはそうではありません。

これは私のカスタムディレクティブです：

Vue.directive('sortable', { 
    bind: function(el, binding, vnode) { 
     // Initialize sortable 
     this.sortable = Sortable.create(el, {}); 
     console.debug("Sortable initialized"); 

     this.sortable.option("onUpdate", function(event) { 
      binding.value.move(event.oldIndex, event.newIndex); 
      var updated = binding.value; 
      Vue.set(tasks, updated); 
     }); 
    } 
}); 

そして、これは私が私のVueのインスタンスを作成する方法である：v-for="(task, index) in tasks"：私が使用して私のテンプレートでは

app = new Vue({ 
    el: "#app", 
    data: { 
     subtotal: 0, 
     tasks: [ 
      {name: '', quantity: '', rate: 80, costs: ''} 
     ] 
    }, 
    methods: { 
     newTask: function() { 
      this.tasks.push({name: '', quantity: '', rate: 80, costs: ''}) 
     }, 
     deleteTask: function(index) { 
      this.tasks.splice(index, 1); 
      this.calculateTotal(); 
     }, 
     calculateCosts: function(event, value, index) { 
      this.tasks[index].costs = event.target.value * value; 
      this.calculateTotal(); 
     }, 
     calculateTotal: function() { 
      this.subtotal = 0; 
      _.forEach(this.tasks, $.proxy(function(task) { 
       this.subtotal += task.costs; 
      }, this)); 
     } 
    } 
}); 

を。私は何か間違っていましたか

Answer 1

documentationと同じように、以下のメソッドはビューの更新をトリガーします。包まれた方法は以下のとおりです。

• プッシュ（）
• ポップ（）
• シフト（）
• アンシフト（）
• スプライス（）
• ソート（）
• リバース（）

しかし、私はあなたもまた次のことをしているのを見ています原因VUEでcaveatsに、突然変異を誘発しないだろう方法、：

this.tasks[index].costs = event.target.value * value; 

これは、突然変異を誘発し、Object.assignとVue.setの助けを借りて、ビューを更新するには、以下に置き換えることができます：

var newVal = Object.assign({}, this.tasks[index], {costs: event.target.value * value}) 
Vue.set(this.tasks, index, newVal)