vue two linkage, click the color

<template>
  <div>
    <div class="indexheard">
      <div class="index_type">
        <label class="titlestyle">第一级</label>
        <div class="typediv">
          <label
            class="typestyle"
            v-for="(item, index) in typelist"
            v-bind:class="{ type_clable: FirstIndex === index }"
            :key="index"
            @click="FirstLevelChange(index, item)"
            >{{ item.menu_name }}</label
          >
        </div>
      </div>
      <br />
      <div style="margin-top: 7px;">
        <label class="titlestyle" style>第二级</label>
        <div class="typediv1">
          <label
            class="typestyle"
            v-for="(item, index) in typelist[FirstIndex].node"
            :key="index"
            v-bind:class="{ type_clable: SecondIndex === index }"
            @click="SecondLevelChange(index, item)"
            >{{ item.menu_name }}</label
          >
        </div>
      </div>
      <province ref="pro" v-show="isshow" />
    </div>
  </div>
</template>

<script>
export default {
  name: "clable",
  data() {
    return {
      typelist: [
        {
          id: 4,
          menu_name: "颜色",
          node: [
            {
              id: 5,
              menu_name: "红色"
            },
            {
              id: 6,
              menu_name: "蓝色"
            },
            {
              ID: . 7 ,, 
              MENU_NAME: "White " 
            }, 
            { 
              ID: . 8 , 
              MENU_NAME: "gray " 
            } 
            
          ] 
        }, 
        { 
          ID: . 1 , 
          MENU_NAME: "Weather " , 
          Node: [ 
            { 
              ID: 13 is , 
              MENU_NAME: "cloudy " 
            }, 
            { 
              ID: 14 
              MENU_NAME: "cloudy " 
            }, 
            { 
              ID: 15 , 
              MENU_NAME: "sunny " 
            }, 
            { 
              ID: 16 , 
              MENU_NAME: "rain " 
            }, 
         
          ] 
        } 
      ], 
      FirstIndex: 0 , 
      SecondIndex: 0 , 
    }; 
  }, 
  Methods: { 
    // The first classification click event 
    FirstLevelChange (index, Item) {
       the this .FirstIndex =index;
       the this .SecondIndex = 0 ; 
    }, 
    // secondary classification click event 
    SecondLevelChange (index, Item) {
       the this .SecondIndex = index; 
    } 
  }, 
};
 </ Script>

<style lang="scss" scoped>
.indexheard {
  margin: 21px 5px 0 8%;
  height: 64px;
}
.typestyle {
  color: rgba(112, 112, 112, 1);
  font-size: 14px;
  margin-right: 20px;
}
.typediv {
  float: left;
  margin: 5px 0 0 20px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: rgba(147, 147, 147, 1);
}
.typediv1 {
  float: left;
  margin: 5px 0 0 10px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: rgba(147, 147, 147, 1);
}
.titlestyle {
  float: left;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2d2d2d;
  opacity: 1;
  margin-top: 5px;
}
.updata_lable {
  color: $base-color;
  font-size: 14px;
  margin-right: 20px;
}
.type_clable {
  color: #2d2d2d;
  font-family: PingFang SC;
  font-weight: bold;
}
</style>

Note Click the click event when the data switching back and forth on the line! ! !