4

ページを読み込むときに、optboxesアイテムのリストを取得します。

ソース

プロジェクトのソースはオンラインです：

optboxesページ

HTTP リクエストは適切に送信され、適切なデータが返されます。

created(){
    this.getOptboxes();
},
components: {
    'optbox': OptboxComponent,
},
methods: {
    getOptboxes() {
        optboxes.all().then((response) => {
            this.setOptboxes(response.data.output);
    }).catch(() = > {
            this.no_optbox_message = 'there is no optbox';
        logging.error(this.$t('optboxes.get.failed'))
    });
    }
},
vuex: {
    actions: { setOptboxes: actions.setOptboxes},
    getters: { optboxesList: getters.retrieveOptboxes}
}

次のように結果を繰り返し処理しています。

<div v-for="optbox in optboxesList" class="panel panel-default">
     <optbox :optbox="optbox"></optbox>
</div>

店

const state = {
    optboxes: {
        /*
        'akema': {
            hostname: "192.168.2.23",
            id: "akema",
            printers: [
                {
                    description: "bureau",
                    destination_port: 9100,
                    forward: "normal",
                    hostname: "1.2.3.4",
                    id: 0,
                    listening_port: 9102
                }
            ]
        }
        */
    }
};

質問

別のページに切り替えて戻ると、リストが表示されます。また、Vuex 拡張機能を使用すると、状態をコミットして変更を確認できることにも気付きました。

変更が自動的に適用されないのはなぜですか?

4

3 に答える 3

5

Change Detection Caveatsのため、データ構造を変更する必要がありました。

JavaScript の制限により、Vue.jsは配列に対する次の変更を検出できません。

  • たとえば、インデックスを使用してアイテムを直接設定する場合vm.items[0] = {};
  • たとえば、配列の長さを変更する場合vm.items.length = 0。

店

optboxes配列になりました。

const state = {
    optboxes:[]
}

次に、それに応じてミューテーションを更新して、配列を編集します。

于 2016-08-07T22:38:32.380 に答える
4

多分それは反応性の問題ですか？あなたの setOptboxes ミューテーションが vue によって検出されていないと思います:

setOptboxes(state, optboxes) {
    for (var optbox of optboxes) {
        state.optboxes[optbox.id] = optbox;
    }
}

ここでそれについて読むことができます：

https://vuejs.org/guide/list.html#注意事項

https://vuejs.org/guide/reactivity.html

docs ソリューションは、次を使用することです。

state.optboxes.$set(optbox.id, optbox);

これにより、ビューの更新がトリガーされます。

于 2016-08-07T19:27:50.460 に答える