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

 更新时间:2021年09月09日 10:06:37   作者:qq_43127193  
这篇文章主要介绍了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.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.attr_vals ? item.attr_vals.split(" ") : [];
        //控制文本框的显示与隐藏
        item.inputVisible=false
        //文本框中输入的值
        item.inputValue=''
        console.log(item)
      });
      this.paramasData = res.data;
      console.log(this.paramasData);
    },

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

相关文章

  • element-ui中按需引入的实现

    element-ui中按需引入的实现

    这篇文章主要介绍了element-ui中按需引入的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 手把手教你在vue中使用three.js

    手把手教你在vue中使用three.js

    最近在vue3项目中通过three.js实现了实际的三维效果demo,下面这篇文章主要给大家介绍了关于在vue中使用three.js的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue分页组件实例代码

    Vue分页组件实例代码

    这篇文章主要为大家详细介绍了Vue分页组件的实例代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue事件监听函数on中的this指针域使用

    vue事件监听函数on中的this指针域使用

    这篇文章主要介绍了vue事件监听函数on中的this指针域使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 解决vue请求接口第一次成功,第二次失败问题

    解决vue请求接口第一次成功,第二次失败问题

    这篇文章主要介绍了解决vue请求接口第一次成功,第二次失败问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • VUE中常用的4种高级方法

    VUE中常用的4种高级方法

    provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术,它可以将数据注入到一个组件中,然后让它的所有子孙组件都可以访问到这个数据,这篇文章主要介绍了VUE中常用的4种高级方法,需要的朋友可以参考下
    2023-05-05
  • 程序员应该知道的vuex冷门小技巧(超好用)

    程序员应该知道的vuex冷门小技巧(超好用)

    Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,下面这篇文章主要给大家介绍了关于程序员应该知道的vuex冷门小技巧的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue filters和directives访问this的问题详解

    vue filters和directives访问this的问题详解

    这篇文章主要介绍了vue filters和directives访问this的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue 监听窗口变化对页面部分元素重新渲染操作

    vue 监听窗口变化对页面部分元素重新渲染操作

    这篇文章主要介绍了vue 监听窗口变化对页面部分元素重新渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 使某个组件不被 keep-alive 缓存的方法

    vue 使某个组件不被 keep-alive 缓存的方法

    今天小编就为大家分享一篇vue 使某个组件不被 keep-alive 缓存的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论