Vue バインディング オブジェクト、配列データを動的にレンダリングできないケースの詳細な説明

Vue バインディング オブジェクト、配列データを動的にレンダリングできないケースの詳細な説明

プロジェクトシナリオ:

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。
  • Vue の img の src が動的レンダリング時に表示されない問題の解決方法
  • Vueナビゲーションバーの動的レンダリング例
  • Vue フォーム バインディングのサンプル コード (ラジオ ボタン、選択ボックス (単一選択、複数選択、v-for でレンダリングされた動的オプション))
  • VUE Element-UI マルチレベルメニューダイナミックレンダリングコンポーネントの詳細な説明

<<:  MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

>>:  Linux での tcpdump コマンドの詳細な分析と使用方法

推薦する

ファイルのアップロードの進行状況を示す React の例

目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...

小規模プロジェクトで Vue が点滅するのを防ぐ方法

まとめHTML: 要素と v-cloak CSS: [v-cloak]{表示: なし}プロセスページ...

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...

VMware 仮想マシンのネットワークの問題の解決方法

目次1. 問題の説明2. 問題解決1. 仮想マシンシステムのインストール時にネットワークがない場合2...

MySQLデータベース設計:Pythonを使ったスキーマ操作方法の詳しい解説

矢が放たれる前に、弓は矢にささやきました。「お前の自由は私のものだ。」スキーマは矢のようなもので、弓...

CSSラベル表示モードについて1つの記事で学ぶ

タグの種類(表示モード) HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分...

Dockerコンテナにホストディレクトリへの書き込み権限がない場合の解決策

Docker コンテナを適用する場合、多くの場合、ホスト ディレクトリを Docker コンテナにマ...

MySQLのスイッチングデータ保存ディレクトリの実装方法

MySQLのスイッチングデータ保存ディレクトリの実装方法今日、仕事中に、mysql が保存されている...

単一のdivの正多角形変換を実現する純粋なCSS

前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...

初心者でもjsのtypeofとinstanceofの違いを理解できます

目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...

Windows 10 での Hyperledger Fabric 1.4 環境構築プロセスの図

内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

ネイティブJSで実装されたギャラリー機能

目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...