@clickメソッドでデータを変更した後、vuejs UIが更新されない

Question

vue.jsを初めて使用しています私はangularjsアプリを移行し始めています。私はvue cliを使って新しいsimple-webpackプロジェクトを生成しています。これにより、新しいwebpack + vueLoaderプロジェクトが作成されます。すべてがスムーズに進みましたが、今は問題があります。私の@clickイベントで私はVueのインスタンスデータの一部を変更しましたが、UIに反映されていません。 via Vue開発ツールを使って、インスタンスが正しく更新されているのを確認できます。

export default{ 
    data() { 
     return { 
     page: { items: null} 
     } 
    }; 

         <div v-for="item in items" class="row-margin"> 
          {{item.checked}} 
          <input type="checkbox" v-model="item.checked"><span>{{item.title}}</span> 
         </div> 

と私は私のAJAXの成功コールバックのアイテムを更新：

this.items = response.items; 

私はvuejsはゲッターを使用してその反応性を実現し、したがって、他に何も必要ありません知っています。欠けている部分は何ですか？

助けてください。

大切にしてください。

Answer 1

items配列内の項目は、最初にcheckedプロパティを持っていません。 2番目のajax呼び出しでその値を設定すると、動的に追加されます。

アイテムがサーバーから取得されます。最初にサーバーの応答からこの小道具を設定したときにチェックされたプロパティを追加したとき、それは完全に機能しました。

は正しいプロセスですか？

Answer 2

あなたのajaxリクエストの結果が届いていますか？もしそうなら、あなたの部門で聴かれていますか？ない場合は、変更してみてください：Vue.jsからVUEのVM

の内側に宣言されていないプロパティを更新し、あなたは上記のコードで

this.page.items = response.items

TO

this.items = response.items;

＃データhttps://vuejs.org/v2/api/#data

Vueインスタンスのデータオブジェクト。 Vueはプロパティをゲッター/セッターに再帰的に変換して反応性にします。一度観察されると、ルートデータオブジェクトに反応性プロパティを追加することはできません。したがって、インスタンスを作成する前に、すべてのルートレベルのリアクティブプロパティを事前に宣言することをお勧めします。

乾杯...