コンポーネントの配列インデックスデータが更新されない

Question

v-forによってテンプレートのリストとしてレンダリングされるVueJSコンポーネント内の配列データを更新する必要があります。

Array全体を更新すると、リストがDOM内で更新されていることがわかります。しかし、インデックスのみを更新すると、リストは更新されません。 documentationから

methods: { 
    loadOnlyOneIndex: function() { 
    this.data[0] = { 
     title: 'Hello error', 
     slug: 'hello', 
     desc: 'will not work' 
    }; 
    }, 
    loadEverything: function() { 
    this.data = [{ 
     title: 'Hello new title', 
     slug: 'hello', 
     desc: 'this will work' 
    }, { 
     title: 'Hello new title 2 !', 
     slug: 'hello2', 
     desc: 'really work' 
    }]; 
    } 
} 

Here is a fiddle.

Answer 1

：ここ

は、2つの関連メソッドです

：原因はJavaScriptの制限に

、Vueが配列に次の変更を検出することはできません

1. インデックスを持つアイテムを直接設定すると、 vm.items[indexOfItem] = newValue

2. たとえば、配列の長さを変更すると、次のようになります。 vm.items.length = newLength

Vueのは、Vue.set() methodを使用し、配列のインデックスの変化に反応するように取得します。あなたのケースでは

---

、あなたはあなたのloadOnlyOneIndex方法でVue.set(this.data, 0, newValue)を使用する必要があります。

Here's a working fiddle.

---

すべてのVueのインスタンスは、（vmがVueのインスタンスである）vm.$set介しVue.set方法のエイリアスを有します。

loadOnlyOneIndexメソッドでthis.$set(this.data, 0, newValue)を使用することもできます。

これは、Single File Componentsを使用している場合、またはVueオブジェクトへの直接参照がない場合に役立ちます。