問題タブ [vue-props]

したがって、選択可能な行などを含むベース「TableComponent」を作成しています。このTableComponentは「ボタン」と呼ばれる小道具を取ります。
TableComponent は、ボタンが次のようなオブジェクトの配列であることを想定しています。

テーブル コンポーネントでは、次のように渡された内容に基づいてボタンの行が作成されます。

問題は、ボタンのクリック機能では、「これ」が親コンポーネントを参照しているため、選択した行などにアクセスできないことです.

編集: 「これ」をクリック機能に渡すだけで解決することがわかりました。それが賢明かどうかは定かではありません。

TableComponent データ:

_

私の Laravel + Vue.js SPA (Single Page Application) では、BootstrapVueとVeeValidateを使用しています。

ファイルでは、データ プロパティ、つまりテンプレートの属性からEditProfile.vueアクセスしたいと考えています。default_country_codedefault_country_code

propsie: Vue ルート インスタンスにデータ属性を持ち、propsin file を使用してテンプレートで使用することで実現EditProfile.vueできます。

しかし、何も使用せずにテンプレートで使用したいprops。を使用する場合props、さまざまなページのテンプレート セクションで使用する必要があるすべての小道具を Vue ルート インスタンスで定義する必要があるためです。また、使用されるデータ属性がpropsデータベースからのものである場合、対応する Laravel コントローラー メソッドで DB で複数のクエリを作成し、それらを Vue ルート インスタンスで使用する必要があります。そして、このアプローチは疎結合のアーキテクチャではないように思えます。

EditProfile.vueページには、次のものがあります。

前に言ったように、Vue ルート インスタンスの助けを借りてdefault_country_code、テンプレート属性を使用せずに使用するにはどうすればよいですか?props

完全なソース コード: https://github.com/tenzan/menu-ui-tw

デモ: https://flamboyant-euclid-6fcb57.netlify.com/

ゴール：

ItemsListとItemImageは の子コンポーネントMenu.vueです。左側のアイテムが時間間隔で自動的に変更された後、右側の画像を変更するには、 image_urlfromItemsListをに渡す必要があります。ItemImage

• 左側: コンポーネントItemsList.vue
• 右側: コンポーネントItemImage.vue

Component Menu.vueには 2 つの子コンポーネントがあります。

ItemsList.vue:

ItemImage.vue -ほとんど空

ItemsListは各項目を繰り返し処理し、強調表示します。そのアクティブ/ハイライトされたアイテムの画像を表示するには、コンポーネントItemImageが必要です。画像のURLは.item.image_url

そのため、親ビューから別のビューに小道具を渡す際に問題が発生しています。現在、単純な変数を使用してテストしているだけですが、それを拾っていないようです...エラーなどはありません。マイページに表示されないだけです。

ここに私の親コードがあります:

そして、ここに私の子要素からのコードスニペットがあります:

そして、私が通貨を使用する場所：

この要素が取得されない理由について、私が間違ったことを誰かが見ることができますか?

敬具、ジョシュ