vue--嵌套循环，分别点击子节点，高亮显示当前点击项

Posted 2020-12-14 lindablog

<template>
  <div class="hello">
    <div class="specs" v-for="(item,index)  in arrList" :key="index">
      <div>{{item.name}}:</div>
      <div class="spec" v-for="(item1,index1) in item.list" :key="index1" @click="orderChange(index,index1)">

        <p :class="[States[index]==index1 ? ‘activeClass‘ : ‘‘]" > {{item1.name}}{{States[index]}}{{index}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      States:{},
      arrList:[
        {
          name:‘客户等级‘,
          list:[
            {
              name: ‘高级‘
            },
            {
              name: ‘中级‘
            },
            {
              name: ‘初级‘
            }
          ]
        },
        {
          name:‘业主等级‘,
          list:[
            {
              name: ‘高级业主‘
            },
            {
              name: ‘中级业主‘
            },
            {
              name: ‘初级业主‘
            }
          ]
        }
      ]
    }
  },
  created(){
    let index = 0;
    var obj={}
    var States = {};
    for(obj in this.arrList){
      States[index] = 0;
      index++;
    }
    this.States = States;
    // 0:0 表示specs[0]第一个【高级】高亮显示；1:0 表示specs[1]第一个【高级业主】高亮显示
    console.log(‘默认高亮显示的项：‘,this.States); // 0:0 ; 1:0
  },
  methods:{
    orderChange(index,index1){
      console.log(index,index1);
      this.States[index] = index1;
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.activeClass{
  color: red;
}
</style>

显示结果：