preliminary/src/common/CheckBox.vue

<template>
  <div class="check-wrap" v-if="item">
    <p class="quest">{{indx + '.' + item.name}}</p>
    <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
    <p v-for="(it,index) in item.questionDetailList" class="list">
      <img :src="checkId.includes(it.id)?check:defaultPic" @click="handleClick(it,index)">
      <span :class="{'check':checkId.includes(it.id)}">{{it.name}}</span>
    </p>
  </div>
</template>
<script type="text/javascript">
import tools from '@utils/tools.js';
import icon from '../images/check-default.png'
import checkIcon from '../images/check.png'
  export default{
    name:'CheckBox',
    data(){
      return{
        imgUrl:tools.imageUrlPrefix,
        defaultPic:icon,
        check:checkIcon,
        checkId:[]
      }
    },
    props:['item','indx'],
    methods:{
      handleClick(it){
        const id = it.id;
        let ids = this.checkId;
        if(ids.includes(id)){
          this.checkId.splice(ids.indexOf(id),1);
        }else{
          this.checkId.push(id);
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .check-wrap{
    font-size: .3rem;
    .quest{
      color:#000;
      margin-bottom: .2rem;
    }
    img{
      width:100%;
    }
    .list{
      color: #7C828E;
      margin:0 .1rem .1rem 0;
      padding: .12rem .1rem;
      display: inline-block;
      img{
        width: .38rem;
        vertical-align: middle;
      }
    }
    .check{
      color: #4F50FF;
    }
  }
</style>