亲宝软件园·资讯

展开

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

qq_43127193 人气:0
想了解vue 绑定对象,数组之数据无法动态渲染案例详解的相关内容吗,qq_43127193在本文为您仔细讲解vue 绑定对象,数组之数据无法动态渲染的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue绑定对象,数组无法动态渲染,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:

原来是我在获取参数列表之后 立马把值进行了双向绑定,之后才向每一列的对象里添加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);
    },

加载全部内容

相关教程
猜你喜欢
用户评论