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

以下もご興味があるかもしれません: