帮忙看个简单的小项目

Question

首先这个是项目要求https://pro.modao.cc/app/yYrFSrhbpUkSjrOCYpKg9iO6d2PPFGo

这个是数据

const data =[

  {

    lv:'美国学前',

    level:'L1',

    theWords:['see','play', 'me','at','run','go','and','look','can','here'],

    stuAnswer:''

  },

  {

    lv:'美国学前',

    level:'L2',

    theWords:['you','come','not','with','jump','help','is','work','are','this'],

    stuAnswer:''

  },

  {

    lv:'美国小学1年级',

    level:'L3',

    theWords:['road','live','thank','when','bigger','how','always','night','spring','today'],

    stuAnswer:''

  }

]

这是我目前写的代码

<template>

<div class="home">

<p class="title">请点击选出自己认识的单词</p>

<checker  

  v-for="(item, index) in items"

  v-if="index == 0"

  @click.native="checker(index)"

  class="check-box" 

  v-model="demo" 

  type="checkbox" 

  default-item-class="demo1-item" 

  selected-item-class="demo1-item-selected"

  >

  <checker-item 

    class="check-item"

    v-for="(item2, index2) in item.theWords"

    :value="item2"

    @click.native="selected(item2,item.lv,item.level,index)"

  >{{item2}}</checker-item>

</checker>

<x-button 

  class="submit" 

  type="primary" 

  ref="submit"

  @click.native="submit"

  link="/homeTwo"

>{{msg}}</x-button>

</div>

</template>

<script>

import {getHomeData} from '@/api/index';

export default {

name:'HomeOne',

data() {

return {

items:[],

demo:'',

msg:'都不认识'

}

},

props:{

value:{

type:String,

default:''

}

},

created() {

this.getData();

},

methods:{

getData() {

getHomeData().then(data => {

this.items = data;

})

},

selected(query,lv,level,index) {

if(lv) {

this.msg = '我选好了';

$('.submit').css('background-color','rgb(205, 165, 104)')

}

else {

this.msg = '都不认识';

$('.submit').css('background-color','rgb(217, 106, 107)')

}

},

submit() {

}

}

}

</script>

<style scoped>

  .home{

  width:100%;

  }

  .title{

  width:100%;

  display: block;

  font-weight: bold;

  text-align: center;

  margin:50px 0;

  }

  .list{

  width:100%;

  margin-bottom: 20px;

  }

  .check-box{

  display: flex;

  justify-content: center;

  align-items:center;

  align-content:space-between;

  flex-wrap: wrap;

  }

  .check-item{

  margin:0 auto;

  width:34%;

  margin-bottom: 40px;

  }

  .demo1-item {

  text-align: center;

  border: 1px solid #ccc;

  line-height: 1;

  padding: 10px 0px;

  border-radius: 5px;

    background-color: #eee;

  }

  .demo1-item-selected {

  background-color: rgb(139, 195, 74);

  }

  .submit{

  width:83%;

  font-size: 16px;

  background-color: rgb(217, 106, 107);

  }

  .submit-selected{

  background-color:rgb(205, 165, 104);

  }

</style>

下面说说我的问题

1、要求只要有一个选中了下面的不认识就会变我选好了，然后我的是要点到第二个才会变，我改变的方式引用的jquery，能不能用vue的方式解决一下

2、当点击选好了会把你不认识的单词显示出来，点击按钮的时候怎么获取到clected里面的那些参数以及上面循环的那些

3、当认识9个以上的时候会出来下一套题， 我设置的index==0所以只出来第一套，要怎么获取到这个index以及当我点击了9个以上按了提交让index变为1出来下一套题

求高手帮我看看吧，这是我的第一个项目，研究了蛮久了，我可以给个小红包感谢，QQ405708338