プロジェクトシナリオ:Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バーのタブページでのデータ属性の変更 問題の説明:+ 新しいタグ タブをクリックすると、追加する属性を入力するための入力ボックスがポップアップ表示されます。 その結果、クリックしてもすぐにレンダリングされない。 非同期getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = this.$http.get( を待ちます `categories/${this.cat_id}/attributes`、 { パラメータ: { sel: "many" } } ); this.paramasData = res.data; res.data.forEach(アイテム => { item.attr_vals = item.attr_vals ? item.attr_vals.split(" "): []; //テキスト ボックス項目の表示と非表示を制御します。inputVisible=false //テキストボックスに入力された値 item.inputValue='' コンソール.log(アイテム) }); コンソールにログ出力します。 }, //ボタンをクリックしてダイアログボックスを表示します //ボタンをクリックしてテキスト入力ボックスを表示します showInput(row) { 行.inputVisible = true // テキスト ボックスが自動的にフォーカスを取得するようにします // $nextTick メソッドの機能は、ページ上の要素が再レンダリングされた後にのみ、コールバック関数でコードを指定することです // this.$nextTick((_) => { // this.$refs.saveTagInput.$refs.input.focus() // }) }, 原因分析:この記事を参照 https://www.jb51.net/article/222379.htm パラメータリストを取得した後、すぐに双方向に値をバインドし、各列のオブジェクトに inputvisible コントロール属性を追加したことが判明しました。その結果、後でボタンがクリックされたときに、入力ボックスの v-if で各オブジェクトの Inputvisible をリアルタイムにレンダリングすることができませんでした。 双方向バインディングの後、配列内のオブジェクトのプロパティ値が追加されます。Vue では、その後に配列に追加されたオブジェクトの getter 関数と setter 関数をバインドする方法がないため、リアルタイム レンダリングを実現できません。 解決:データを変更したら、data 内のデータに値を割り当てます。 今すぐ 非同期getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = this.$http.get( を待ちます `categories/${this.cat_id}/attributes`、 { パラメータ: { sel: "many" } } ); res.data.forEach(アイテム => { item.attr_vals = item.attr_vals ? item.attr_vals.split(" "): []; //テキスト ボックス項目の表示と非表示を制御します。inputVisible=false //テキストボックスに入力された値 item.inputValue='' コンソール.log(アイテム) }); this.paramasData = res.data; コンソールにログ出力します。 }, これで、vue バインディング オブジェクト、配列データは動的にレンダリングできないという記事は終わりです。vue バインディング オブジェクト、配列データは動的にレンダリングできないという関連の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します
>>: Linux での tcpdump コマンドの詳細な分析と使用方法
目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...
まとめHTML: 要素と v-cloak CSS: [v-cloak]{表示: なし}プロセスページ...
1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...
目次1. 問題の説明2. 問題解決1. 仮想マシンシステムのインストール時にネットワークがない場合2...
矢が放たれる前に、弓は矢にささやきました。「お前の自由は私のものだ。」スキーマは矢のようなもので、弓...
タグの種類(表示モード) HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分...
Docker コンテナを適用する場合、多くの場合、ホスト ディレクトリを Docker コンテナにマ...
MySQLのスイッチングデータ保存ディレクトリの実装方法今日、仕事中に、mysql が保存されている...
前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...
目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...
内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...
目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...
前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...