專案場景：

黑馬專案管理實戰，獲取商品分類，展開欄的標籤頁中修改修改資料屬性

問題描述：

在本該點選+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 方法的作用，就是當頁面上元素被重新渲染之後，才會指定回撥函式中的程式碼
      // this.$nextTick((_) => {
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })
    },

原因分析：

參考這篇文章

https://www.jb51.net/article/222379.htm

原來是我在獲取引數列表之後 立馬把值進行了雙向繫結，之後才向每一列的物件裡新增客棧inputvisible控制屬性，導致後續在點選button時，每一個物件的Inputvisble不能跟 程式設計客棧 input框中得v-if進行實時渲染。

進行雙向繫結後新增陣列中物件的屬性值，沒有辦法讓vue為陣列中後續新增的物件進行getter跟setter函式的繫結，所以就沒辦法得到實時渲染。

解決方案：

在對資料進行修改完成後，再對data中的資料進行賦值。

 即

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.atthttp://www.cppcns.com
 
r_vals ? item.attr_vals.split(" ") : [http://www.cppcns.com];
        //控制文字框的顯示與隱藏
        item.inputVisible=false
        //文字框中輸入的值
        item.inputValue=''
        console.log(item)
      });
      this.paramasData = res.data;
      console.log(this.paramasData);
    },

到此這篇關於vue 繫結物件,陣列之資料無法動態渲染案例詳解的文章就介紹到這了,更多相關vue 繫結物件,陣列之資料無法動態渲染內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！