問題タブ [vuejs2]

Vue.js 変数と画像 URL を連結したい。

私が計算したもの：

Android用にビルドする場合:

そうしないと

計算された変数を URL と連結するにはどうすればよいですか?

私はそれを試してみました：

私はVue 1.xで以下を持っていました

しかし、Vue 2で試しました：

「プロパティまたはメソッド「サムネイル」はインスタンスで定義されていませんが、レンダリング中に参照されています。データオプションでリアクティブデータプロパティを宣言してください」

注: 通常の口ひげ補間フィルターは、html 要素のプロパティに割り当てると機能しません (つまり、{{ data | filter }} はプレーン テキストとしては正常に機能しますが、src="{{ を実行しようとすると機能しません)。データ | フィルター}}".

計算されたプロパティを試しましたが、計算された値を取得しようとしている要素が配列内の各要素であるため、機能しませんでした (配列内の各要素をループしています)。

サムネイルが行うことは、正規表現と派手なテキスト置換を行うことだけです。vue2 でこれを行う最善の方法がわからない。

だから私はVueでアプリに取り組んでいます。コンポーネント間のデータの送受信に問題があります。で既に試しまし$dispatch/$broadcastた$emit/$onが、まだ動作しています。active_clubからClubSelection.vueに選択して送信したいvue_main.js。

ビューのバージョン: 2.0.3

私のアプリの構造:

1. vue_main - メイン Vue ファイル
   1. HeaderElement.vue ( vue_mainの子)
      1. ClubSelection.vue ( HeaderElementの子)

ClubSelection から vue_main に active_club を送信する必要があります。

ClubSelection.vue

vue_main.js

エラー:

Vue warn]: ウォッチャー "club" のエラー (コンポーネントで見つかりました)

vue_main.js:16924 Uncaught (in promise) ReferenceError: クラブが定義されていません

いろいろ設定してみましたが、これもその一つです。これを機能させる方法は？

Vue.js 2 と単一ファイル コンポーネントを使用して完全に再利用可能なコンポーネントを作成しようとしていますが、現在、私のアプローチは実現できないようです。

目標は、複雑なネストされた JSON 構造のフォームを作成するためのコンポーネントを作成することです。この構造は、編集してからサーバーに送信することになっています。コンポーネント自体はヘッダーと送信ボタンを表示しますが、フィールドとその配置は完全に私のコンポーネントのユーザーの責任です。(フロントエンドエンジニア)

MyForm コンポーネント (実装はここでは関係ありません) には、JSON データと URL が渡されて投稿されます。

フォームは他の多くのユーザーが再利用できると想定されており、フォーム自体の内容は無関係であると想定されています。子として html/inputs/custom コンポーネントが混在している場合があります。

次のデータを使用して、データがネストされていない単純なシナリオを想像してみましょう。

そして、コンポーネントを使用して作成したいフォーム:

したがって：

1. MyForm は送信するモデルを渡され、それをデータに保存します
2. MyTextInput は、入力をラベル付きで表示するためのカスタム コンポーネントです。
3. 2 番目の MyTextInput は同じコンポーネントですが、「MyPanel」という名前の別のコンポーネントに作成されます。これは、このフィールドを別の場所に配置する必要があるためです。

ご覧のとおり、変数の受け渡しと構成自体には多くの問題があります。

構成：

1. <slot></slot>フィールドを表示するために のテンプレートに配置するMyFormと、親スコープでコンパイルされるため、すべての子 (MyTextField を含む) は「モデル」にアクセスできません。
2. 使用しようとする<MyForm inline-template>と、すべてのコンテンツが置き換えられるため、フォームのヘッダーとフッターを自動的に表示できません。さらに、単一ファイル コンポーネントを使用する場合、コンパイラは 内のすべてのコンポーネントを検索します。つまり、inline-templateインポートする必要があり、実用的ではありません。私の形になることのないすべてのコンポーネントを事前に知っているわけではありません。MyTextInputMyPanelMyForm

変数を渡す:

1. 「モデル」から変数を直接使用すると (最初の TextInput で)、親から変数を変更しているという警告が表示され、次のレンダリングで上書きされます (ただし、この場合、意図的に変更しているため、上書きされません)親）
2. モデルMyTextInputを first に渡さずに second に渡すことはできませんMyPanel。実際には、間にあるすべてのカスタム コンポーネントに渡す必要があります。また、カスタム コンポーネントがいくつ存在するかは事前にわかりません。これは、これまでに配置されるすべてのコンポーネントのコードを変更するMyForm必要があり、ユーザーが含める各カスタム コンポーネントのデータを渡す必要があることを意味します。
3. 変更について親に適切に通知しようとする場合、v-on: イベントをすべての textinput とその間のすべてのカスタム コンポーネントに追加して、イベントが に到達するようにする必要がありMyFormます。

私が言ったように、コンポーネントはシンプルで簡単に再利用できるはずでした. このコンポーネントのユーザーに、このコンポーネントに入れるすべての子のコードを変更するように要求し、内部のすべてのコンポーネントに v-on: を追加するように要求することは、実用的ではないようです。

私のアイデアは Vue.js 2.0 を使用して解決できますか? 以前に AngularJS (1.5) 用に同じコンポーネントを設計しましたが、正常に機能しており、フォームの各子に変更を加える必要はありませんでした。

VueJS 1.0 に問題があり、この動作は VueJS 2.0 で機能します。VueJS 1.0 では、整数のリストがあり、それにチェックボックス v-model がバインドされている場合、整数のリストはチェックされた属性としてマップされません。

ここにHTMLがあります

次に、JavaScript を次に示します。

出力では「1」が正しくチェックボックスに入れられますが、2 と 3 は整数であり、チェックされたものとして表示されません。VueJS 2.0 ではこれは機能しますが、VueJS 1.0 では機能しません。

完全な JSFiddle はこちらから入手できます: https://jsfiddle.net/qf5gqsg6/