有个小项目帮我看一下

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你应该用一个数组来保存你选中的，然后用数组的长度来判断按钮的状态，直接绑定在样式上就行