数据二次处理

<template>
  <!-- 
  1. 根据不同状态切换不同模板 （单选1 / 多选2）
  2. 根据数据渲染出视图 (组件的基础交互逻辑)
  3. 数据处理  (后端要求的接口参数 和 组件直接给到的数据格式对应不上)
 -->
 <!-- 
   多个筛选条件下的交互实现
   1. 纯作为筛选条件存在
      page pageSize (type keyword)
      params：{
        page: 1,
        pageSize:10,
        keyword: '',
        type: ''
      }
      点击确定按钮进行筛选(重新拉取list)  只要select值切换就进行筛选(select -> @change ->重新拉取list)

   2. 多个筛选框有依赖的关系
      城市 -> 区域
      先把城市列表渲染上去  监听城市change事件  在change事件回调中做数据筛选  把筛选之后的数据交给区域下拉框进行显式
  -->
  <!-- 
    git相关
    1. npm / yarn 固定同一个包管理器

    2. package.lock   yarn.lock   版本锁定文件  锁定是安装包的版本号
       整个团队都用一套固定的代码版本 防止出现由于版本不同导致的代码无法兼容
       yarn.lock 这个文件全团队都必须用一个

    3. 冲突解决  
       打开文件  标记感叹号   当前更改  |  传入更新 | 保留俩者 | 对比俩者
       点击对比俩者  找到我们需要的那个代码
       如果要右边 -> 传入更新
       如果要左边 -> 当前更改
       俩个都要 -> 保留俩者

       git add . 
       git commit -m "解决冲突"

    4. 现阶段：关联远程分支  克隆代码  提交代码  拉取代码  解决冲突  创建分支  切换分支 查看分支
       查看当前提交状态
   -->
  <div id="app">
    <!-- 切换单选多选类型 -->
    <el-radio-group v-model="questionType">
      <el-radio :label="1">单选</el-radio>
      <el-radio :label="2">多选</el-radio>
    </el-radio-group>
    <!-- 单选状态下的整体视图 -->
    <template v-if="questionType === 1">
      <div>
        <el-radio-group v-model="singleCheck">
          <div v-for="item in options" :key="item.code" style="display: flex">
            <!-- 
              label: 由于互斥的交互形式 label必须绑定一个独一无二的值
              交互形式：选中哪个单选框 它的label属性会自动绑定到v-model绑定的数据上
             -->
            <el-radio :label="item.code">{{ item.code }}</el-radio>
            <el-input type="text"></el-input>
          </div>
        </el-radio-group>
      </div>
    </template>
    <!-- 多选状态下的整体视图 -->
    <template v-if="questionType === 2">
      <div>
        <el-checkbox-group v-model="checkList">
          <div v-for="item in options" :key="item.code" style="display: flex">
            <!-- 
              label: 由于支持多选 所以v-model绑定的必须是数组
              交互形式：所有选中项的label值会被自动push到v-model绑定的checkList中
                       如果要回显也是要操作checkList
             -->
            <el-checkbox :label="item.code">{{ item.code }}</el-checkbox>
            <el-input type="text"></el-input>
          </div>
        </el-checkbox-group>
      </div>
    </template>
    <el-button @click="confirmSingle">单选</el-button>
    <el-button @click="confirmMany">多选</el-button>
    <!-- 
      // 单选
      options: [
        {
          code: 'A',
          text: 'this is text',
          isRight: 1
        },
        {
          code: 'B',
          text: 'this is text',
          isRight: 0
        },
        {
          code: 'C',
          text: 'this is text',
          isRight: 0
        },
        {
          code: 'D',
          text: 'this is text',
          isRight: 0
        }
      ]
      // 多选
      options: [
        {
          code: 'A',
          text: 'this is text',
          isRight: 1
        },
        {
          code: 'B',
          text: 'this is text',
          isRight: 1
        },
        {
          code: 'C',
          text: 'this is text',
          isRight: 0
        },
        {
          code: 'D',
          text: 'this is text',
          isRight: 0
        }
      ]
     -->
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
      questionType: 1, // 题目类型
      singleCheck: 'D',// 单选类型下选中的值
      checkList: ['A', 'B'], // 多选类型下选中的值
      // 题目选项
      options: [
        {
          code: 'A',
          text: 'this is text',
          isRight: true
        },
        {
          code: 'B',
          text: 'this is text',
          isRight: false
        },
        {
          code: 'C',
          text: 'this is text',
          isRight: false
        },
        {
          code: 'D',
          text: 'this is text',
          isRight: false
        }
      ]
    }
  },
  methods: {
    confirmSingle() {
      // 数据处理
      const newOptions = this.options.map(item => {
        let isRight
        if (item.code === this.singleCheck) {
          isRight = 1
        } else {
          isRight = 0
        }
        return {
          ...item,
          isRight
        }
      })
      console.log(newOptions)
    },
    confirmMany(){
      const list = this.options.map(item => {
        let isRight
        if(this.checkList.includes(item.code)){
          isRight = 1
        }else{
          isRight = 0
        }
        return {
          ...item,
          isRight
        }
      })
      console.log(list)
    }
  }

}
</script>