vue 绑定对象,数组之数据无法动态渲染案例详解

项目场景：

黑马vue项目管理实战，获取商品分类，展开栏的标签页中修改修改数据属性

问题描述：

在本该点击+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.cnhackhy.com/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.attr_vals ? item.attr_vals.split(" ") : [];
        //控制文本框的显示与隐藏
        item.inputVisible=false
        //文本框中输入的值
        item.inputValue=''
        console.log(item)
      });
      this.paramasData = res.data;
      console.log(this.paramasData);
    },

到此这篇关于vue 绑定对象,数组之数据无法动态渲染案例详解的文章就介绍到这了,更多相关vue 绑定对象,数组之数据无法动态渲染内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！

您可能感兴趣的文章:

• vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
• Vue中img的src是动态渲染时不显示的解决
• vue导航栏部分的动态渲染实例
• Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
• 详解VUE Element-UI多级菜单动态渲染的组件

本文由 华域联盟 原创撰写：华域联盟 » vue 绑定对象,数组之数据无法动态渲染案例详解

转载请保留出处和原文链接：https://www.cnhackhy.com/81263.htm