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 绑定对象,数组之数据无法动态渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3+typeScript穿梭框的实现示例

    vue3+typeScript穿梭框的实现示例

    这篇文章主要介绍了vue3+typeScript穿梭框的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue 实现左滑图片验证功能

    vue 实现左滑图片验证功能

    网页中滑动图片验证一直是各大网站、移动端的主流校验方式,其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护方式,这篇文章主要介绍了vue 实现左滑图片验证,需要的朋友可以参考下
    2023-04-04
  • 浅析Vue 和微信小程序的区别、比较

    浅析Vue 和微信小程序的区别、比较

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别,需要的朋友可以参考下
    2018-08-08
  • vue实现文章评论和回复列表

    vue实现文章评论和回复列表

    这篇文章主要为大家详细介绍了vue实现文章评论和回复列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue组件中修改组件外元素样式的两种解决方案

    vue组件中修改组件外元素样式的两种解决方案

    这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue键盘事件keyup、keydown的作用

    vue键盘事件keyup、keydown的作用

    这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • ElementUI之Message功能拓展详解

    ElementUI之Message功能拓展详解

    这篇文章主要介绍了ElementUI之Message功能拓展详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue使用showdown并实现代码区域高亮的示例代码

    vue使用showdown并实现代码区域高亮的示例代码

    这篇文章主要介绍了vue使用showdown并实现代码区域高亮的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue 中 element-ui table合并上下两行相同数据单元格

    vue 中 element-ui table合并上下两行相同数据单元格

    这篇文章主要介绍了vue 中 element-ui table合并上下两行相同数据单元格,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • Vue路由跳转与接收参数的实现方式

    Vue路由跳转与接收参数的实现方式

    这篇文章主要介绍了Vue路由跳转与接收参数的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论