在做一个菜单列表的时候,点击那个节点那个进行高亮显示,会对其进行增删改查,样式如下
一开始我用的下标来进行判断高亮显示,但是进行增删查操作,再进行点击样式就乱套了。总的来说是因为只要值的地址没有改变,vue是检测不到数据变化的
解决方法1
最开始的解决办法是用的是$event事件来进行处理,但是会造成资源消耗,重排重绘
body代码,给每个for循环渲染的节点绑定一个点击事件。给第一个元素默认给个高亮样式active
<div
v-for="(o, index) in fieldList"
:key="o.id"
:class="index == 0 ? `active ${o.id}` : `${o.id}`"
class="text item"
ref="doms"
@click="zhanshi(o.id, $event)"
>
<div>{{ o?.field }}</div>
<!-- 鼠标滑过出现删除修改按钮 -->
<div class="button_group">
<el-button
type="primary"
icon="el-icon-edit"
@click="Import_accounts(5, o.id, o.field)"
circle
size="mini"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
@click="deleteField(1, o.id)"
circle
size="mini"
></el-button>
</div>
js代码,判单点击的事件是存在的,判单不能点击别的样式类名。
async zhanshi(e) {
if (e) {
if (
e.target.className != "box-card" &&
e.target.className != "el-card__body" &&
e.target.className != "el-icon-edit" &&
e.target.className !=
"el-button el-button--primary el-button--mini is-circle" &&
e.target.className != "button_group" &&
e.target.className != "el-icon-delete"
) {
// 判断点击的文字马,它的类型是为空的
if (e.target.className != "") {
// 找到他的父节点下所有孩子,清除样式,排他算法
for (let i = 0; i < e.target.parentNode.children.length; i++) {
e.target.parentNode.children[i].className = "text item";
}
e.target.className = "active text item";
} else { // 点击的是文字节点,类型为空,要找到父节点的父节点
for (
let i = 0;
i < e.target.parentNode.parentNode.children.length;
i++
) {
e.target.parentNode.parentNode.children[i].className =
"text item";
}
e.target.parentNode.className = "active text item";
}
}}
解决方法2,利用$set方法:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。
简单小demo
<template>
<div class="home">
<div v-for="(item,index) in items" :key="index">{{item}}</div>
<button @click="btn()">修改</button>
</div>
</template>
<script>
import Vue from 'vue' // 别忘了引入
export default {
name: 'Home',
data(){
return{
items:[1, 2, 3]
}
},
methods:{
btn(){
Vue.set(this.items, 1, 'two')
console.log(this.items);
}
}
}
</script>