問題タブ [vue-component]

子コンポーネントのいずれかのボタンがクリックされたときに、親コンポーネントで実行するメソッドを取得しようとしています。Webpack で単一ファイル コンポーネントを使用しています。子コンポーネントのコードは次のとおりです。

そして、親のコード:

コンポーネントは、変数countを表示する単なる h1 要素です。totalボタンをクリックすると、「foo」はコンソールに記録されますが、「bar」は記録されず、合計も変わりません。私が間違っていることについてのアイデアはありますか？前もって感謝します！

main.js からモジュールをインポートする場合:

この例では、私の component.js に VueResource を再インポートする必要がありますか?

そうでない場合、component.js で vue ressource を使用したいときにエラーが発生する理由がわかりません。

component.js :

VueJS 2.0 RC を試し、fetch API を使用して一部のコンポーネントのデータをロードします。モックの例を次に示します。

オブジェクトは、アプリの初期化前に定義されたグローバルなアプリケーションの状態であり、そのdataサブセットのみがコンポーネントで必要とされるため、その部分です。コンポーネントのデータのメイン セットは、呼び出しようとしている別のエンドポイントから取得されます。ただし、dataプロパティはオブジェクトを期待しており、レンダリングなどのテンプレート内のループのコンテキストでは実際には使用できない Promise を取得しています (例v-for="record in records")

私はこれについて間違った方法で進んでいますか？データrecordsプロパティが完全にフェッチされたら更新する方法は何ですか? 約束が解決するまでコードを強制的に停止する方法はありますか (効果的に同期します)? いずれにせよ、コンポーネントはデータなしでは役に立たないため、使用できるようになるまでに待機期間があります。

vue-async や vue-resource などのプラグインを使用せずに、コンポーネントのデータ フィールドを非同期に設定する正しい方法は何ですか?

(これを行うには、promise 以外の ajax 呼び出しの XHR/jQuery メソッドを使用できることは知っていますが、フェッチを使用してそれを行う方法を学びたいと思います)

更新:作成されたフックと、このようにデータをロードするメソッドを定義しようとしましたが、サイコロはありません-私自身の実験では、レコードプロパティはロードされると更新に失敗します. データが正常にフェッチされても (コンソールに正常にログインしても)、変更されません。

vue-router と、通常の Vue コンポーネントではなく、リンクがクリックされたときにトリガーするコンポーネントを使用して、私と関係がある可能性があります。さらに調査中...

更新 #2: 上記の jsfiddle アプローチの調査を続けてコンソールに記録するthis.recordsとresponse.payload、レコード オブジェクトが入力されていることが示されます。ただし、これはテンプレートまたはコンポーネント自体の変更をトリガーするようには見えません。Vue 開発ツールで調べると、records プロパティは空の配列のままです。実際、メソッドlogstuffとそれを呼び出すボタンをテンプレートに追加し、このメソッドthis.recordsをコンソールにログインさせると、空の配列でオブザーバーがログに記録されます。

コンポーネントの data プロパティが、明示的に別の値に設定された後でも更新されないのはなぜだろうか。$routeメソッドをトリガーするためのウォッチャーを設定しようとしましたreloadが、サイコロはありません-そのルートの後続のすべてのロードは実際にフェッチを再発行し、コンソールはthis.records（フェッチ内から）入力されたものとしてログに記録しますが、「実際の」this.recordsは空の配列のままです.

シンプルなイベント システムに vue-router を使用してコンポーネント システムをセットアップしました。既存のイベントの編集と新しいイベントの作成の両方に同じコンポーネントを使用できるようにしたいと考えています。

あるイベントの編集から別のイベントの作成に移動するときに、コンポーネントからデータを削除する方法がわかりません。

次のことを試しましたが、うまくいきません。

• v-link で eventId: null を設定する
• v-on:click を使用して eventId を null に設定する
• eventId の設定: this.$route.params.eventId

ルーター マップ: create と eventDashboard ルートは同じコンポーネントを指します。

新しいイベントを作成するために使用するボタンは次のとおりです。

そしてコンポーネント:

$dispatch メソッドを使用して Vue の子から Vue の親にデータを送信する方法がわかりません。次のように、複数のインスタンスを持つコンポーネントがあります。

私の Vue インスタンスは次のようになります。

「領収書」コンポーネントのインスタンスが複数あるため、コンポーネントの計算された「合計」関数から複数の値が計算されます。コンポーネントのインスタンスの「合計」関数の値をディスパッチし、親インスタンスで「総計」を取得するにはどうすればよいですか

laravel elixir をコンソールで 6.0 バージョンにアップグレードすると、次のようなエラーが表示されます
[Vue warn]: Attributes ":model.sync", "key", "name" are ignored on component <wysiwyg> because the component is a fragment instance:。
私はすでにこのvue docを読んでいます。
私はlaravel-elixir 5.0を使用していましたが、すべて問題ありませんでした。
また、webpack の browserify を変更しました。コンポーネントへのテンプレートは、これを使用してインクルードします:

このエラーを修正するにはどうすればよいですか?

説明(tl;dr):

を介して vuex のストアからコンポーネントに「オブジェクトのオブジェクト」を渡すv-modelと、モデルの変更でエラーが発生します。「オブジェクトのオブジェクト」が渡された場合のみ。他のタイプでは、すべて問題ありません。

「オブジェクトのオブジェクト」と言ったとき、私はこの構造を意味します: {'A': {name: 'first'}, 'B': {name: 'second'}}.

ワークフローと構造:

• 構造: view (page)-> parent-> child;
• ビューObjectからストアを取得し、それをコンポーネントに渡します (-> parrent-> child);
• " .sync" は許可されていないため、コンポーネントはストア内のオブジェクトを変更してはなりません。
• の変更後、結果を 、 に返すchild必要があり、vuex のセッター経由で保存する必要があります。childparentparentviewview

エラーメッセージ:

Getter (ストアから) :

ビュー (ページ) :

親コンポーネント:

子コンポーネント:

PSオブジェクトが参照渡しされたため、問題が発生したと思います。しかし、このエラーと戦う方法は?