有个小项目帮我看一下

Question

这是项目要求这是数据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"   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(this.demo.length) { 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、当点击我选好了会把你不认识的单词显示出来，我如何在点击的时候获取到selected里面的那些参数以及对应的那10个单词的数组3、当选中9个以上的时候会出来下一套题，我现在设置的是index==0所以出来的是第一套，我要如何获取到这个index,当选中9个以上的时候让他自加1出来下一套题这是我的第一个项目，希望有大神帮帮我，小弟非常感谢 q 405708338

Answer 1

1你应该用一个数组来保存你选中的，然后用数组的长度来判断按钮的状态，直接绑定在样式上就行