問題タブ [vuex]

ネストされた JSON の特定のレベルの各要素に、それ自体のパラメーターを使用して JSON を繰り返し挿入することになっている私の関数は、返された最初のオブジェクトを複製し、それを各ネストされたパラメーターに挿入しています。以下のスクリーンショットとコードを参照して、私が何をしているのかを感じてください。

基本的に、状態内にネストされた JSON オブジェクトがあり、API から JSON を返すアクションと状態を更新するミューテーションを使用して、既存のオブジェクトの各「行」のネストされたプロパティに繰り返し追加する必要があります。

問題は突然変異の中にあると思います。私の関数は、API から返された最初の JSON オブジェクトを複製していると推測しました。API 関数および JSON の構造とともに、以下の Action および Mutation 関数を参照してください。

http://api.capecodcommission.org/docs/index.html#sumofannualcapitaltotalsfor Treatment

v-for を使用して実行される特定のコンポーネント内の関数:

関数の実行、JSON の表示:

V-for ループ:

API 関数:

アクション: API から JSON をプルし、ミューテーション関数をディスパッチします。

Mutation: JSON で状態を更新します。

編集：下の写真

コンポーネント: http://i.imgur.com/lcS5Fgo.jpg

JSON 構造: http://i.imgur.com/AsANZOp.jpg

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

ソース

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

• optboxesページ;
• ストア(ストア、アクション、ミューテーション、ゲッター)。

optboxesページ

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

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

店

質問

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

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

解決printerList後に再評価する必要がある計算されたプロパティを取得しましたが、そうではないようです。getPrinters()

ソースはオンラインです: optbox.component.vue、vuex、optboxes.service.js

成分

行動

突然変異

質問

printerList計算されたプロパティが再評価されないのはなぜですか(つまり、v-for空です)

webpack、vue、vuex、vue-loader などを使用しています。これがすべて正しく設定されているかどうかわかりません。

そして私の行動：

私が抱えている問題は、このフォームが AJAX で「送信」されているため、応答が無効になったときにフォーム入力が入力されたままになることです。そのため、アクション内から、logininfo.password = ''そのフォーム フィールドをクリアするように設定する方法が必要です。しかし、そのコンポーネントのデータに再度アクセスする方法がわかりません。たぶん私は何かを誤解しており、このデータ (logininfo) は本当に vuex ストアにあるはずですか? このデータは、バックエンドに資格情報を渡すために使用しているだけなので、メインの状態ストアに置くべきではないと感じました。そのため、データをコンポーネントにローカライズしました。

ヒント/提案はありますか？

私はまだ vue.js を学習中であり、Vuex を使用して大規模なアプリを作成する方法を学ぶための小さなプロジェクトの途中です。

アプリのボタンを使用して配列から特定の項目を削除しようとしているときに問題が発生しています。Vuex でこれを行うための正しい構文を取得できないようです。これが私が取り組んでいるものです：

お店

行動

ゲッター

アプリ

ボタンをクリックするとアプリに新しいコンポーネントを配置する配列に空白のアイテムを追加するアクションを設定しましたが、各コンポーネントにボタンadd itemを追加してそれを機能させる方法がわかりませんremove item。

これが理にかなっていることを願っています！

いくつかのフォルダーに v-for を含むリストがあります。これらのいずれかをクリックすると、関数を実行する必要があります。

私のコードは次のようになります。

(サブコンポーネントなしで) 現在のフォルダーにアクセスする簡単な方法はありますか?

(私も Vuex を使用していますが、これはデータを変更しない UI のみの操作であるため、Vuex のアクションを回避することをお勧めしますよね?)