vue數(shù)據(jù)無法動態(tài)渲染的實例詳解

這篇文章主要介紹“vue數(shù)據(jù)無法動態(tài)渲染的實例詳解”，在日常操作中，相信很多人在vue數(shù)據(jù)無法動態(tài)渲染的實例詳解問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue數(shù)據(jù)無法動態(tài)渲染的實例詳解”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

項目場景：

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

問題描述：

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

結(jié)果點擊時卻不能立馬渲染

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()
      // })
    },

原因分析：

原來是我在獲取參數(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ù)據(jù)無法動態(tài)渲染的實例詳解”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>