vue class样式绑定问题 includes()

Question

template 代码

            <template v-for="item in myList" ><!-- -->
              <ul>
                <span class="span_i"><i></i>{{item.CatName}}</span>
                <li v-for="item1 in item.GameList" :key="item.Id" @click="check_show(item1)" :class="includes(item1)">
                  {{item1.Name}}
                </li>
              </ul>
            </template>

class样式函数

    includes(item1){
      if (this.selectGame.includes(item1)){
        return 'on'
      }else{
        return ''
      }
    },

    //点击选择收藏的内容
    check_show(item1) {
      const index1 = this.selectGame.indexOf(item1);
      // let aa = { idName:item.Id,nameId:item.Name}
      if(index1 > -1 ){
        this.selectGame.splice(index1, 1)
      }else if(this.selectGame.length < 10){
        this.selectGame.push(item1);
      }
    },

我现在遇到的问题是如何保存住这种状态，刷新页面后li上的"on"就会重置，即使selectGame里面有数据也不会显示“on”

Answer 1

item1是对象，selectGame是对象数组，虽然看上去item1在selectGame里面，但是地址不一样，includes()一直会返回false。

<div :class="JSON.stringify(selectGame).indexOf(JSON.stringify(item1)) > -1 ? 'on' : ''"></div>