vue中点击当前单词只高亮当前句子里特定索引下的单词

Question

数据结构如下

`

 <div v-for="(item,index) in sentence" :key="index" class="gragh">
        <span v-for="(i,index) in item.sentenceWords" :key="index">
          <span
            v-for="(k,index) in i.content"
            :key="index"
            :class="{active: checkindex==index}"
            @contextmenu="showMenu(i)"
            @click="getSelectText(i,index)"
          >
            {{k}}
            <vue-context-menu
              :contextMenuData="contextMenuData"
              @modify="modify"
              @insert="insert"
              @newdata="del"
            ></vue-context-menu>
          </span>
        </span>
      </div>

`

 getSelectText(val, index) {
      this.checkindex = index;
      }

单击某个句子中的单词的时候，高亮当前单词，如果有重复单词的话 ，仅高亮当前索引下（比如 一个句子有重复的单词 通过点击确定索引 准确高亮）

但是这样实现的效果

所有句子的同样索引下的单词都高亮了

求教如何更改

Answer 1

解决了

`

<span
            v-for="(k,index) in i.content"
            :key="index"
            :class="{active: checkindex==index && sentenceId == i.id}"
            @contextmenu="showMenu(i)"
            @click="getSelectText(i,index)"
          >
            {{k}}
            <vue-context-menu
              :contextMenuData="contextMenuData"
              @modify="modify"
              @insert="insert"
              @newdata="del"
            ></vue-context-menu>
          </span>

`