vue中如何动态拼接this后面的变量

更新时间：2023年07月05日 14:33:39 作者：起啥名呢啊

这篇文章主要介绍了vue中如何动态拼接this后面的变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue动态拼接this后面的变量

写项目的用到for循环，动态拼接变量，用了几种方法不行，终于找到一种，记录一下：

   for (let i = 1; i <= 4; i++) {
        let data = { RequestType: "Get", portNumber: i + "" };
        console.log(i);
        console.log(this["Str" + i]);    
        this.$axios
          .post("/api/config/dev", data)
          .then((res) => {
            let data = res.data;
            this["Str" + i][1].xinxi = data.subtemperature; // 子设备温度1
          })
          .catch((error) => {
            console.log(error);
          });
      }

直接在this后面加[]，在里面添加你要拼接的内容！

亲测有效!!!

react、vue动态拼接key（动态拼接key或者其他参数）

react动态拼接

在这里插入图片描述

这里拿到的拿到的这个值‘roomDisabled’是一个字符串，并不是一个变量的值，

解决办法：

{this.state[${type}Disabled]}

例子：

在这里插入图片描述

vue动态拼接

  let  addRoom = '新增';
  let  editRoom = '修改';
  let  key='Room';
  console.log('test',this['addRoom'],this['editRoom'],this[`add${[this.key]}`])

在这里插入图片描述

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 数组添加数据方式
这篇文章主要介绍了vue 数组添加数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
VueCLI通过process.env配置环境变量的实现
本文主要介绍了VueCLI通过process.env配置环境变量的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue-router vuex-oidc动态路由实例及功能详解
这篇文章主要为大家介绍了vue-router vuex-oidc动态路由实例及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
在vue中使用Echarts画曲线图的示例
这篇文章主要介绍了在vue中使用Echarts画曲线图的示例，帮助大家在vue中绘制图表，感兴趣的朋友可以了解下
2020-10-10
Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程
这篇文章主要介绍了Vue+Koa+MongoDB从零打造一个任务管理系统,本文通过图文实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue3鼠标拖拽滑动效果实现demo
这篇文章主要为大家介绍了vue3鼠标拖拽滑动效果实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
Vue操作数组的几种常用方法小结
本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
2023-09-09
vue打印功能实现的两种方法总结
在项目中,有时需要打印页面的表格,所以下面这篇文章主要给大家介绍了关于vue打印功能实现的两种方法,以及批量打印的完整代码,需要的朋友可以参考下
2021-06-06
实例讲解vue源码架构
在本篇文章中小编给大家分享了关于vue源码架构的相关知识点内容，有需要的朋友们学习下。
2019-01-01
vue制作toast组件npm包示例代码
这篇文章主要介绍了vue制作一个toast组件npm包,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10