問題タブ [vue-component]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
vue.js - メソッド --> アクション --> ミューテーション --> 状態の問題
ネストされた 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
javascript - ディレクトリ内のより良いコード コンポーネントを構造化する方法は?
問題は、ディレクトリ内のコンポーネントをどのように構成するかです。どの設計パターンに従うのがよいでしょうか?
unit-testing - vue コンポーネントの受け渡し方法をテストする方法
親から渡された propmodal
を持つVue コンポーネントがあります。onClose
ボタンをクリックするok
と、onClose
メソッドがトリガーされます。コードは次のとおりです。
コンポーネントの単体テストはメソッドでmodal
定義する必要spy
があると思うclose
ので、テストは次のようになります。
テストはエラーで失敗しました:TypeError: [Function] is not a spy or a call to a spy!
javascript - Vue JS 条件付きレンダリング
次のような Icon.vue ファイルがあります。
ペーストビンでも利用可能
ご覧のとおり、次のロジックがいくつかあります。
- 名前
- 削除する
- 編集
- 見る
Laravel を使用してブレード テンプレートから変数を渡していますが、ブレード テンプレート内で if を true に設定するにはどうすればよいですか。
例えば :
削除ロジックを追加しません。可能であれば、どうすればいいですか?
ありがとう
vue.js - 動的子コンポーネント データの交換
私はvuejsが初めてで、親コンポーネントのプロパティ<component :is="view">
である場所を使用してスワップインおよびスワップアウトするいくつかの子コンポーネントを持つ親コンポーネントがあるという問題があります。view
問題は、各子コンポーネントに、親コンポーネントに保存されている異なるデータセットを設定する必要があることです...したがって、
親コンポーネント
したがって、viewがview1 の場合はdata1を使用し、viewはview2を使用data2など...
子コンポーネントのテンプレートで同期データを使用できますか?
子コンポーネント テンプレート
パーシャルの使用はどうですか?コンポーネントとは対照的に、誰かがその使用について詳しく説明できますか?
vue.js - VueJS コンポーネントの入力同期
コンポーネントのローカル スコープに双方向でバインドする入力を持つコンポーネントを作成したいと考えています。
コンポーネントがなければ、新しいVue
インスタンスを作成してdata
から、必要なものを設定します。次に を使用してv-model
、入力をそのデータにバインドすると、入力から操作できます。
ただし、同じコードをコンポーネントに変換すると、私の人生では、コンポーネントの入力を取得してそのデータにバインドすることはできません。props、:data.sync
、data
attributes を試しましたが、何を試しても、コンポーネント内の入力は何もしません。
これを説明するために JSFiddle を作成しました。
https://fiddle.jshell.net/f0pdmLhy/2/
私がしたいのは、下の非コンポーネントバージョンと同じように、コンポーネントの入力を err 変数に双方向バインドすることです。
どうすればこれを達成できますか?
私は基本的に、ajax データでインスタンス化して入力を設定できるコンポーネントを作成したいと考えています。その後、入力によってデータが更新され、save メソッドを使用してデータをサーバーに送信できます。これはコンポーネントを使用して行うこともできますか?
javascript - オブジェクトの配列を小道具としてコンポーネントに渡し、配列のメンバーを小道具としてネストされたコンポーネントに渡すにはどうすればよいですか?
編集のこの投稿の下部で、私が達成したいこととほとんどうまくいったことについて説明します
以下は、アプリの上に定義された<oo-upload>
と<oo-uploads>
コンポーネントの両方を含む私のアプリです。アプリのファイル アップロード プラグインを構築するため<oo-uploads>
のコンポーネントの表を基本的に表示します。変数はすべてのアップロードのリストであり、個々のアップロードを<oo-upload>
定義します。uploads
upload
問題は、コンポーネントobjUpload
の各インスタンスにオブジェクトが渡されていないことです。<oo-upload>
代わりに、Vue デバッガーは、コンポーネントがオブジェクトではなく関数に渡されていることを示します。小道具として<oo-uploads>
受け取るのに問題はありません。uploads
編集:配列をwithinuploads
の単一のインスタンスに直接渡すと、配列全体がうまく渡されますが、何らかの理由で配列を反復処理せず、オブジェクトだけを渡します。<oo-upload>
<oo-uploads>
objUpload
EDIT2:基本的に、私がやりたいことは、渡すデータの範囲をそのコンポーネントに必要なものだけに制限することです。割り当てられたアップロードに対してのみ動作するアップロード コンポーネントが必要です。私の練習が不十分であるか、実装が不可能である可能性があることを認識しています.同様のことを達成する方法についてのポインタが必要です.
jquery-select2 - Vue コンポーネントとして作成されたときに Select2 が表示されない
select2 jquery コンポーネント用のvue.jsコンポーネントを作成しました。コンポーネントの問題は、コンポーネントのテンプレートがそのままの選択である場合、選択が非表示になることです (表示されていません) 。
(chrome インスペクターを使用すると、選択が jquery プラグインによって効果的に select2 に変換されていることがわかりますが、サイズは 1x1 px です)
... 問題は、テンプレートで選択を DIV でラップするとすべてが機能することです。
vue のディレクティブ (v-select2) を使用して、select を select2 に変換しています
ここに完全なコードがあります https://jsfiddle.net/futuretelematics/tkL8zxby/