代碼如下，我的選項(xiàng)卡是，根據(jù)一個(gè)總分來渲染每一個(gè)分?jǐn)?shù)。 每個(gè)分?jǐn)?shù)對應(yīng)相同的知識點(diǎn)，用戶可以在相應(yīng)的分?jǐn)?shù)下高亮知識點(diǎn)。

每個(gè)分?jǐn)?shù)選項(xiàng)卡切換和高亮是獨(dú)立的。

為什么，3個(gè)分?jǐn)?shù)按鈕，，切換 不管用呢?

全部代碼

<template>
    <div >
          <p style="margin-top:10px;">
            分?jǐn)?shù)：
            <template v-for="n in score">
              <el-button  size="small"  v-html="n" :data-item ="JSON.stringify(item)"  @click="setKnowLedge(item,$event)"></el-button>
            </template>
          </p>
          <p style="margin-top:10px;">
         知識點(diǎn)：
            <span v-for="i in item.basetree" :key="i.basecodeVo+Math.random()">
              <el-button 
                v-for="j in i.sons"
                :key="j.idVo+Math.random()"
                :class="{checked:j.isRight}"
                class="buttonstyle"
                @click="treeChange(item,j,$event)">{{j.nameVo}}
              </el-button>
            </span>
        </p>
    </div>
</template>
<script type="text/javascript">
  import {strToUrl} from '../../main'
  export default {
    data (){
      return {
      }
    },
    props: ['item','score'],
    mounted: function () {
//      this.paperDetail();
    },
    watch:{
      code:'paperDetail'
    },
    methods: {
      treeChange(item,j,$event) {
          j.isRight = +(!j.isRight);
          j.isTrue = j.isRight;

          var dataItem = JSON.stringify(item);

         this.$nextTick(function(){

          console.log($($event.target));
            //console.log($($event.target).closest('.scoreBox'))
            $($event.target).closest('.scoreBox').find('.active').get(0).setAttribute('data-item',dataItem);
         })
      },
      setKnowLedge(item,$event){
        console.log($event.target)
         var dataItem = JSON.parse($event.target.getAttribute('data-item'));

         dataItem.active = true;

         Object.assign(item,JSON.parse(JSON.stringify(dataItem)));


         this.$nextTick(function(){
           console.log($event.target)
           //console.log(dataItem,22222)
           $($event.target).siblings().removeClass('active')
           $($event.target).addClass('active')          
         })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .buttonstyle {
    cursor: pointer;
    margin-bottom: 15px;
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid red;
    background-color: white;
    color: red;
    outline: none;
  }

  .checked {
    border: 1px solid #13ce66;
    color: #13ce66;
    outline: none;
  }
</style>