复选框选中第3个时取消第1个

实现代码：

html代码：
<template>
  <div>
    <div class="container" v-for="(item, index) in choiceData" :key="index">
      <img  :src="item.checked ? require('../assets/active.png'):require('../assets/default.png')"  @click="changeStatus(item)" />
      <div>{{ item.name }}</div>
    </div>
  </div>
</template>

javascript:
<script>
export default {
  components: {},
  data() {
    return {
      choiceData: [
        {
          value: "1",
          name: "外来原因",
          checked: false,
        },
        {
          value: "2",
          name: "手机卡顿不好使",
          checked: false,
        },
        {
          value: "3",
          name: "内容复杂，不符合要求",
          checked: false,
        },
        {
          value: "4",
          name: "实名认证暴露信息",
          checked: false,
        },
        {
          value: "5",
          name: "安全/隐私顾虑",
          checked: false,
        },
        {
          value: "0",
          name: "其他",
          checked: false,
        },
      ],
      show:[]
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    changeStatus(item){
      item.checked = !item.checked

      if(item.checked){
        this.show.unshift(item)
      }else{
        this.show.forEach((m,index)=>{
          if(item.name == m.name){
            this.show.splice(index,1)
          }
        })
      }
     
     this.showChecked()
    },

    showChecked(){
      // 选中第三个的时候,删除第一选中的元素
      if(this.show.length >2){
        this.show.splice(this.show.length-1,1)
      }

      this.choiceData.forEach((item)=>{
        return item.checked = false
      })
     
     // checked为true的展示
      this.show.forEach((i)=>{
        this.choiceData.forEach((res)=>{
          if(i.name == res.name){
            return res.checked = true
          }
        })
      })
    }
  },
};
</script>

效果展示：