vue项目遇到的问题

data数据非对象直接修改无效的原因

在创建时设置了一个删除按钮，删除按钮是在展示div的内部，每次点击删除，其实也触发了父级的事件，导致一直删除失败，需要@click.stop='del'即可。

对比两个数组的数据

需要对比修改前后的两个数组，在vue中，数据都为arr;所以需要深拷贝一份,

this.arr1= JSON.parse(JSON.stringify(arr));

对比的方法很多，可以使用indexOf,includes等。

that.localarrtele.forEach((el)=>{
	if(uidarr.includes(el.uid)){
	  ......
	}else{

	  let mqmessage = new Paho.MQTT.Message(sendmes);
	  ......
	}
})

之前做一个数是否在某一数组中，使用了一个计量值，然后看是否不符合等于最后arr.length,可以简化成以上的方法.

修改数据异步问题

原先对传来的数据进行分类，在最下方写了传播事件，后来某个事件需要修改，加了个异步请求，所以最下方的请求在请求结果之前就执行了，不符合预期，需要修改到请求结果处理完。

......
	else if(message.contentType==4){
		 
			if(message.tipType){
					if(message.tipType==1){
							......
							newThis&&newThis.$store.commit("getqunlist",parseInt(newThis.$store.state.qunlist)+1)
					}else if(message.tipType==2){
					
							let postData={
									chRoomId:message.groupJid
							}
							newThis.$axios.post(`${url1}/xxx/xxxxx`,
									postData
							).then(function(res){
									if(res.data.meta.success==false){

									}else{
											......
											sessionStorage.setItem('kickpeople',JSON.stringify(obj))
											newThis&&newThis.$store.commit("getqunlist",parseInt(newThis.$store.state.qunlist)+1)
											 }


									}
							}).catch(function(err){
									// newThis.$message.error()
							})
						 
							
					}
			}
			
			//newThis&&newThis.$store.commit("getqunlist",parseInt(newThis.$store.state.qunlist)+1)
			return true;
	}

语法检查关闭

不小心安装了语法检查，修改build\webpack.base.conf.js

rules: [
      ...(config.dev.useEslint ? [] : []),

第一个[]中的createLintingRule()去掉即可

更改盒模型

当界面需要等分，同时有需要加入边框时(可以用flex，在不能使用flex情况下，可以更改盒模型)

<div id="w">
	<div class="k1">1</div>
	<div class="k2">2</div>
</div>

*{
	margin:0;
	padding:0;
	font-size:0;
}
#w .k1{
	font-size:10px;
	display:inline-block;
	width:50%;
	height:100px;
	background: palegreen;
	border-right:10px solid black;
	box-sizing: border-box;
}
#w .k2{
    font-size:10px;
	width:50%;
	display:inline-block;
	height:100px;
	background: orangered;
}