谁不看谁是

news2024/9/21 23:23:45

 

 

报错Cannot create property 'type' on string ''

是因为 你定义的相关变量是字符串

 改成这样就行了

 

 vue报错Cannot set properties of undefined (setting ‘xxx‘)

是因为没获取到值,需要在方法外层定义变量等于this,然后在方法内使用变量.name去查找值;

方法返回值是一个promise对象-vue中返回结果是promise的处理方式-vue打印方法的返回值是一个Promise

 async getFileNameRepeatStatus(id, name) {
      let status=false;
      await this.$http({
        method: "POST",
        url: "/cbrc/work/file/checkFile",
        data: { customFileName: name, id: id }
      }).then(res => {

        const { data, code } = res.data;
        if (code == 200) {
          if (data.length > 0) {
            status= true;
          }
        }
      });
      return status;
    },
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

打印

        console.log('this.getFileNameRepeatStatus("", this.fileName) :>> ',this.getFileNameRepeatStatus("", this.fileName));
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

返回值竟然是个promise对象 

 解决方法是加await,等待函数执行完毕再打印

        console.log('this.getFileNameRepeatStatus("", this.fileName) :>> ',await this.getFileNameRepeatStatus("", this.fileName));

 

成功 

vue在data中使用定义的其他data的值-vue的data中使用data的值

data() {
    return {
      
      loginRole: JSON.parse(sessionStorage.getItem("loginUl")),

}
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

如上图,我们要使用loginRole对象里的orgId。写法如下是肯定不行的:

data() {
const that = this;
    return {
      
      loginRole: JSON.parse(sessionStorage.getItem("loginUl")),
orgId:that.loginRole,

}
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

还真不能这样写,建议换成别的方法


const loginRole= JSON.parse(sessionStorage.getItem("loginUl"));
export default {


data() {

    return {
      
    
orgId:loginRole.orgId,

}
}




}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

我们时常要对时间的时分秒进行补零操作

let time=1;//获取到的时分秒
if(time<10)time='0'+time;//第一种
if(time<10)time.padStart(2,0);//第二种

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

vue局部高亮插件:driver.js

vue的watch监听原理

使用elementUI的tab切换实现定制化,达到产品想要的效果

 

其实就相当于轮播图

每次都把filterList的值清空,数组里只存一条值,通过左右切换按钮来给filterList重新赋值,左右切换把真正列表的数据相应的下标拿到filterList里,如果切换到了数据尽头,就把数据里的第一条给到filterList

。。。。我改主意了

现在尝试使用elementUi的走马灯完成效果

 <!-- 切换完走马灯,会把两个下标统统给到,然后获取到list[index].childList[valIndex],
                        给最开始获取列表时默认list[index].childList[0]数据的list[index].filterList赋新值, -->
                      <!-- setContentInfo(valIndex,index) -->
                      <el-carousel
                        trigger="click"
                        height="150px"
                        indicator-position="none"
                        :autoplay="false"
                        arrow="always"
                        @change="setContentInfo(valIndex)"
                      >
                        <el-carousel-item v-for="item in [{a:1,b:2},{b:3,a:4}]" :key="item.a">
                          <h4>{{ item }}</h4>
                        </el-carousel-item>
                      </el-carousel>

 切换

 

如果对象里包含相应的键名就删除

 query.forEach(item => {

        if ("isVisible" in item) delete item.isVisible;

      });

需求实现-重命名删除上移下移移动到顶部等

  

  
  <div
          v-for="(item, index) of modelList"
          :key="item.propertyName"
          style="height:auto;"
        >
          <template v-if="item.flag !== 1">
            {{ item.propertyName }}
            <el-popover
              :ref="`node-popover-adjust-${item.id}`"
              placement="right"
              v-model="item.isVisible"
            >
              <p @click="setNewName = true" class="text-style">
                重命名
              </p>
              <template v-if="setNewName">
                <el-input
                  v-model="newName"
                  placeholder="请输入新报告模块名称"
                  clearable
                /><span
                  class="buttonStyle save"
                  @click="saveNewName(item, index)"
                  title="保存"
                ></span>
              </template>
              <p @click="setIt('删除', index)" class="text-style">
                删除
              </p>
              <p @click="setIt('上移', index)" class="text-style">
                上移
              </p>
              <p @click="setIt('下移', index)" class="text-style">
                下移
              </p>
              <p @click="setIt('移动到顶部', index)" class="text-style">
                移动到顶部
              </p>
              <p @click="setIt('移动到底部', index)" class="text-style">
                移动到底部
              </p>
              <span class="setting" slot="reference" title="设置"></span>
            </el-popover>
          </template>
        </div>













 // 重命名
    saveNewName(item, index) {
      this.modelList[index].propertyName = this.newName;
      this.newName = "";
      this.setNewName = false;
    },
    setIt(type, index) {
      switch (type) {
        case "删除":
          this.modelList[index].flag = 1;
          break;
        case "上移":
          [this.modelList[index], this.modelList[index - 1]] = [
            this.modelList[index - 1],
            this.modelList[index]
          ];
          this.modelList[index - 1].isVisible = false;
          this.$forceUpdate();
          break;
        case "下移":
          [this.modelList[index], this.modelList[index + 1]] = [
            this.modelList[index + 1],
            this.modelList[index]
          ];
          this.modelList[index + 1].isVisible = false;
          this.$forceUpdate();
          break;
        case "移动到顶部":
          [this.modelList[index], this.modelList[0]] = [
            this.modelList[0],
            this.modelList[index]
          ];
          this.modelList[0].isVisible = false;
          console.log(' this.modelList :>> ',  this.modelList);
          this.$forceUpdate();
          break;
        case "移动到底部":
          [this.modelList[index], this.modelList[this.modelList.length - 1]] = [
            this.modelList[this.modelList.length - 1],
            this.modelList[index]
          ];
          this.modelList[[this.modelList.length - 1]].isVisible = false;
          this.$forceUpdate();
          break;
      }
    },

解构赋值

 const {code, data} = res.data.data;

上方代码等于

 const code = res.data.data.code,data=res.data.data.data;

使用$set修改对象的值

 this.$set(
        this.reportList[parentIndex],
        "filterInfo",
        this.reportList[parentIndex].labels[valIndex].value
      );

 element-ui input如何在@change事件中保留默认参数情况下传入自定义参数

                        @change="val => setContentInfo(val, index)"

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/456653.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

项目沟通管理5大技巧 第4个很重要

1、充分使用twitter管理沟通模型 项目沟通会议可以充分使用witter的管理沟通模型&#xff0c;提高会议沟通效率。使用此模型&#xff0c;主要是有三步&#xff1a; 第一步&#xff1a;倾听&#xff0c;项目经理需要保持中立的立场&#xff0c;不先表态&#xff0c;让团队成员畅…

nacos 1.4.2升级到nacos 2.1.1遇到的一些坑

文章目录 1 前言2 拉取nacos配置失败2.1 可能是端口号问题2.2 可能存在jar冲突2.3 可能nacos配置不对 1 前言 为了各组件更好的的兼容&#xff0c;最近系统进行了nacos升级, 由1.4.2升级为2.1.1&#xff0c;这里把遇到的一些坑做一下记录。 2 拉取nacos配置失败 在升级后&am…

Vue(事件处理、计算属性、监视属性)

一、事件处理 1. 语法 Vue模板 v-on:xxx"处理函数" xxx&#xff08;作为绑定事件的简写&#xff09;"处理函数" xxx指代的都是事件名 Vue实例 必须使用methods配置对象&#xff08;配置多个函数方法&#xff09; methods中配置函数&#xff0c;都是Vue…

哈希表题目:网格照明

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;网格照明 出处&#xff1a;1001. 网格照明 难度 6 级 题目描述 要求 在 n n \texttt{n} \times \texttt{n} nn 的二维网格 grid \texttt{grid}…

【C++技能树】原来比C方便这么多 --引用、内联函数、Auto、NULL与nullptr

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…

【软考备战·希赛网每日一练】2023年4月24日

文章目录 一、今日成绩二、错题总结第一题第二题第三题第四题第五题 三、知识查缺 题目及解析来源&#xff1a;2023年04月24日软件设计师每日一练 一、今日成绩 二、错题总结 第一题 解析&#xff1a; 第二题 解析&#xff1a; DPI表示每英寸像素点的个数。 300DPI表示每英寸…

ESP32学习六-构建系统

一、简介 如果想要新建一个ESP32项目&#xff0c;需要包含很多其他的文件夹和文件&#xff0c;如果对ESP32的勾线系统原理不理解&#xff0c;就会产生出很多编译不通过的问题。这里就对ESP-IDF构建系统的实现原理做一个简单的总结。 测试环境&#xff1a;Ubuntu18.4 ESP-IDF&am…

Observability:添加免费和开放的 Elastic APM 作为 Elastic 可观察性部署的一部分 - 8.x

作者&#xff1a;David Hope 在最近的一篇博文中&#xff0c;我们向你展示了如何开始使用 Elastic 可观察性的免费开放层。 下面&#xff0c;我们将介绍你需要做些什么来扩展你的部署&#xff0c;这样你就可以开始免费从应用程序性能监控&#xff08;APM&#xff09;或跟踪集群…

我国直播电商行业市场增速下降 核心竞争力发生转变 新一轮洗牌变革步伐将加快

1、直播电商概念及其产业链图解 直播电商是属于网络直播的一个分支&#xff0c;属于一种泛娱乐类直播&#xff0c;电商店铺的店家或模特主播在直播间通过借助视频录制工具&#xff0c;将店铺所售的商品展示给用户&#xff0c;并为用户答疑解惑&#xff0c;提供实时的客服服务&…

【JavaEE初阶】多线程(二)线程状态以及多线程安全问题

摄影分享~~ 文章目录 线程的状态多线程带来的风险线程安全线程安全的原因解决线程不安全问题&#xff08;加锁&#xff09;synchronized关键字-监视器锁monitor locksynchronized的特性 java中的死锁问题死锁死锁的三个典型情况死锁的四个必要条件如何避免死锁&#xff1f; J…

家用洗地机怎么选?2023高性价比家用洗地机推荐

相信大家和我一样是妥妥的“懒人一族”了&#xff0c;不喜欢做家务、不喜欢碰脏水、不喜欢花费过多的时间在家务上&#xff0c;但是却想有一个整洁干净的家居环境。而作为家务清洁中面积最大、耗时耗力最多的就是扫地拖地了。传统的地面清洁方式&#xff0c;要先用扫把扫一遍&a…

Git上传本地代码到Github

参考 https://zhuanlan.zhihu.com/p/138305054 文章目录 上传本地代码到github仓库&#xff08;1&#xff09;创建一个空文件夹&#xff0c;在该文件夹下右键&#xff0c;Git bash here&#xff08;2&#xff09;初始化仓库&#xff08;3&#xff09; 建立本地与github上项目的…

ChatGPT 速通手册——让 ChatGPT 来写正则表达式

regex 生成 正则表达式可谓是一门让广大程序员们又爱又恨的技术。它易学难精&#xff0c;而且可维护性又差&#xff0c;别说交接给其他同事&#xff0c;同一个人写的正则表达式&#xff0c;三个月后回头再看&#xff0c;也可能完全不知所云。 因此&#xff0c;让 ChatGPT 来写…

【计网 从头自己构建协议】一、libpcap 介绍 手撕以太网帧

上一篇&#xff1a;IndexError: list index out of range 下一篇&#xff1a;[【计网 从头自己构建协议】二、收发 ARP 请求帧与响应帧] 介绍 理论的学习总是枯燥的&#xff0c;想要加深对理论的理解&#xff0c;最好的方法就是自己实践一遍。 想要亲手实现各种协议&#xf…

通讯方式连接成功,其他原因导致的连接失败解决方案

一、电脑中有其他品牌visa导致的冲突&#xff08;以tekvisa为例&#xff09; 1、删除tekvisa 2、下载一个NI Package Manager&#xff0c;卸载里面所有NI的东西 &#xff08;https://www.ni.com/zh-cn/support/downloads/software-products/download.package-manager.html#32…

❀五一劳动节来啦❀

今年“五一”&#xff0c;4月29日至5月3日放假调休&#xff0c;共5天。 如果你在5月4日到5月6日请假3天&#xff0c;加上5月7日周日&#xff0c;就可以形成9天的假期。 一&#xff0c;五一劳动节的由来⭐ 国际劳动节又称“五一国际劳动节”“国际示威游行日”&#xff08;英语…

人生中最好的等待叫做来日可期,社科院与杜兰大学金融管理硕士等你惊艳岁月

有句话说&#xff1a;“去日不可追&#xff0c;来日犹可期”。过去的已经过去&#xff0c;不管好的、坏的都已成为我们的回忆。人生中最好的等待就是未来可期。别辜负现在的好时光&#xff0c;努力做想做的事。社科院与杜兰大学金融管理硕士项目等你惊艳时光。 所有出众者的背…

【计算机网络:自顶向下方法】(三) 运输层 (TCP | UDP | 复用 | 传输原理rdt)

【计算机网络&#xff1a;自顶向下方法】 3.1 概述 传输层协议是在端系统中实现的传输层将发送的应用程序进程接受到的报文转换成传输层分组 (运输层报文段)实现的方法/过程 &#xff1a; 将应用报文划分为较小的块&#xff0c;并为每块加上传输层首部以生成传输层报文段ff。I…

【C++】类和对象(中篇)—— 默认成员函数,const成员函数,运算符重载

前言 类和对象没有技巧&#xff0c;只有多加练习&#xff0c;多多尝试自己完成代码&#xff0c;例如各种运算符的重载&#xff0c;或是实现一个自己的日期类 目录 一、类的六个默认成员函数 二、构造函数 2.1 概念 2.2 特点 2.3 默认无参的构造函数 三、析构函数 3.1 概…

ORB305与CISCO路由器构建L2TP over IPSec VPN操作手册

1、网络拓扑在思科路由器与ORB305之间建立一个安全隧道&#xff0c;对客户路由器端设备子网&#xff0c;与思科路由器端服务器子网之间的数据流进行安全保护&#xff0c;组网拓扑图如图所示。 2、思科路由器端配置指导(此处以多数客户使用专线上网形式为例)Cisco&#xff08;AR…