快捷導(dǎo)航

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

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

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

項(xiàng)目場景：

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

問題描述：

在本該點(diǎn)擊+new tag這個(gè)標(biāo)簽頁時(shí)彈出一個(gè)input框讓用戶輸入需要添加的屬性

結(jié)果點(diǎn)擊時(shí)卻不能立馬渲染

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);
    },

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

原因分析：

參考這篇文章

http://www.dbjr.com.cn/article/222379.htm

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

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

解決方案：

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

即

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);
    },

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

您可能感興趣的文章: