vue 綁定對象,數(shù)組之數(shù)據(jù)無法動態(tài)渲染案例詳解

更新時間：2021年09月09日 10:06:37 作者：qq_43127193

這篇文章主要介紹了vue 綁定對象,數(shù)組之數(shù)據(jù)無法動態(tài)渲染案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

項目場景：

黑馬vue項目管理實戰(zhàn)，獲取商品分類，展開欄的標簽頁中修改修改數(shù)據(jù)屬性

問題描述：

在本該點擊+new tag這個標簽頁時彈出一個input框讓用戶輸入需要添加的屬性

結果點擊時卻不能立馬渲染

async getParametersList() {
      this.cat_id = this.currentSelect[this.currentSelect.length - 1];
      const { data: res } = await this.$http.get(
        `categories/${this.cat_id}/attributes`,
        {
          params: { sel: "many" }
        }
      );
      this.paramasData = res.data;
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //控制文本框的顯示與隱藏
        item.inputVisible=false
        //文本框中輸入的值
        item.inputValue=''
        console.log(item)
      });
      console.log(this.paramasData);
    },

//點擊按鈕顯示對話框
   // 點擊按鈕，展示文本輸入框
    showInput(row) {
      row.inputVisible = true
      // 讓文本框自動獲得焦點
      // $nextTick 方法的作用，就是當頁面上元素被重新渲染之后，才會指定回調(diào)函數(shù)中的代碼
      // this.$nextTick((_) => {
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })
    },

原因分析：

參考這篇文章

http://www.fzitv.net/article/222379.htm

原來是我在獲取參數(shù)列表之后立馬把值進行了雙向綁定，之后才向每一列的對象里添加inputvisible控制屬性，導致后續(xù)在點擊button時，每一個對象的Inputvisble不能跟 input框中得v-if進行實時渲染。

進行雙向綁定后添加數(shù)組中對象的屬性值，沒有辦法讓vue為數(shù)組中后續(xù)添加的對象進行getter跟setter函數(shù)的綁定，所以就沒辦法得到實時渲染。

解決方案：

在對數(shù)據(jù)進行修改完成后，再對data中的數(shù)據(jù)進行賦值。

即

async getParametersList() {
      this.cat_id = this.currentSelect[this.currentSelect.length - 1];
      const { data: res } = await this.$http.get(
        `categories/${this.cat_id}/attributes`,
        {
          params: { sel: "many" }
        }
      );
      
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //控制文本框的顯示與隱藏
        item.inputVisible=false
        //文本框中輸入的值
        item.inputValue=''
        console.log(item)
      });
      this.paramasData = res.data;
      console.log(this.paramasData);
    },

到此這篇關于vue 綁定對象,數(shù)組之數(shù)據(jù)無法動態(tài)渲染案例詳解的文章就介紹到這了,更多相關vue 綁定對象,數(shù)組之數(shù)據(jù)無法動態(tài)渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: