問題タブ [vuejs2]

tl;dr : 下の図のような編集可能なセルを含むテーブルを生成しています。私はそれを持っているので、セルは編集可能で全体が更新されますが、実際に新しい行と列を追加するために必要なプロセスを理解するのに苦労しています.

合計を除くすべてのセルはエンド ユーザーが編集できます。たとえば、セル [ex1][item1] を 100 から 150 に変更すると、その行の合計を 320 から 370 に更新するイベントが発生します。 .

最初に、HTML ファイルでメイン テンプレートを定義します...

JS ファイルでは、メインの Vue 要素をそのように初期化します...

次に、6 つの主要な異なるコンポーネント タイプがあります。

• datainput (一般的な入力セル)
• dataheader (datainput を拡張)
• datacell (datainput を拡張)
• baserow (表の行)
• headerrow (baserow を拡張し、データヘッダーで構成)
• datarow (baserow を拡張し、データセルで構成)

行とセルをそのまま追加します

ベースロー

ヘッダー行

<datagrid>[列の追加] をクリックすると、chrome 拡張機能を使用して表示すると、「テスト」が列プロップに追加されていることがわかります。さらに、「テスト」が<headerrow>列プロップに追加されていることがわかりますが、UI には実際には何も生成されません。これは、最初に行と列をどのようにレンダリングしたかの結果であり、ある種の基本的な誤解があるだけだと思います...何がどこで間違っているかについて、誰かが方向性を提供できますか?

vuejs ライフサイクルのマウントされたフックでプロップにアクセスしようとしていますが、値がないようです

私の（本当に単純化された）コンポーネントは次のようになります。

親は次のようになります。

コンポーネントは正しくレンダリングされますが、マウントされた関数からの出力は空の配列です。タイミングの問題のようです。

私は何か間違ったことをしていますか？または、使用する必要がある別のライフサイクル フックがあります。

ありがとう！

コンテンツの JSON ファイルを vuejs アプリにロードし、コンポーネントでアクセスしようとしています。API を作成することで、json を vuex ストアにロードできます。

そしてアクション

メイン vue インスタンスの作成された関数で getSiteContent を実行します

Chrome で vue デバッグ ツールを使用すると、ストアが表示されます

siteData で更新されます。

これはjsonの一部です：

アクセスしようとすると

私のコンポーネントで{{mumbo}}は、未定義の project_name のプロパティを読み取ることができません。

siteData.globalを返すように設定しても倒れないので、これは時間の問題だと思います

何か間違ったことをしているのか、これを機能させるための接続が失われているのかわかりません。

$evalVue 2 から削除されました。

ただし、この JSFiddle (Vue 1) を検討してください: https://jsfiddle.net/kvdmolen/0w193c75

ここに Vue 2.0.7 の JSFiddle があります: https://jsfiddle.net/kvdmolen/0w193c75/1/

これが実際にはコンポーネント (構成可能な列を持つテーブル) であると想像してください。

$evalVue 2に置き換える方法はありますか?

これを使用しても範囲eval()外であるため機能しませんv-for

vuex を使用して自分の API からコンポーネントに配列をプルしようとしていますが、途方に暮れており、おそらくこれを試みることに頭を悩ませています。コンポーネントから直接アクセスされるAPIを使用して、次のように設定しましたが、問題ありませんでした。

参考までに、json は次のようになります。

これをすべてストアに移動すると、実際にこれを機能させる方法がわかりません。vue-resource で vuex を使用したことはありません。

これが間違っていることは承知しており、最大コール スタック サイズ エラーが発生しています。this.catalog = data.body[0].threads;すべてを保管した場合、上記の例 ( ) と同じ結果を得るにはどうすればよいですか?

説明が必要な場合はお知らせください。私はまだ Vue 2.0 を使い始めたばかりです。

私は Vue 2.0 で単一ファイル コンポーネント アプローチを使用しています。私は 3 つのコンポーネントApp(親)、AppHeader、およびを持っていFormModalます。AppHeaderそして、お互いのFormModal直系の子供であり兄弟です。App

目標は、ボタンAppHeaderがクリックされたときにFormModal可視性を切り替えることです。私が抱えている問題は、Vue の一方向データ フローを理解することです。イベントを親 ( App)に戻してAppHeader、フォームの可視性を変更することを知らせるにはどうすればよいですか?

(AppHeader.vue)

(FormModal.vue)

この例では、私は確かに小道具の概念を台無しにしました。テンプレートをインポートするときに props を使用する正しい方法について非常に混乱しています。

編集：

すみません、今日は Vue を使った最初の日です。私は最初、すべてのテンプレートの親である、非常に重要な情報である私のApp.vueファイルを省略しました。

(App.vue)

要約すると、App は親です。2 人の兄弟がいAppHeaderますFormModal。でボタンがクリックされるとAppHeader、FormModalの可視性が切り替えられる必要があります。

私はまだ Vue の一方向のデータ フローを十分に把握しておらず、このシナリオにどのようにアプローチすればよいかわかりません。