报错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;
},
打印
console.log('this.getFileNameRepeatStatus("", this.fileName) :>> ',this.getFileNameRepeatStatus("", this.fileName));
返回值竟然是个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")),
}
}
如上图,我们要使用loginRole对象里的orgId。写法如下是肯定不行的:
data() {
const that = this;
return {
loginRole: JSON.parse(sessionStorage.getItem("loginUl")),
orgId:that.loginRole,
}
}
还真不能这样写,建议换成别的方法
const loginRole= JSON.parse(sessionStorage.getItem("loginUl"));
export default {
data() {
return {
orgId:loginRole.orgId,
}
}
}
我们时常要对时间的时分秒进行补零操作
let time=1;//获取到的时分秒
if(time<10)time='0'+time;//第一种
if(time<10)time.padStart(2,0);//第二种
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)"