vue3页面数据提交事件

Question

1.我想要做点击单选框，就自动往后端提交一行数据，keepId不用管，会自动生成。answerId希望用选中的题目的answerId。keepState是判断这个题目我选择的答案是否正确，需要先做一个判断，如果answerAbcd和radio选中的数据相同,就代表正确，值为1，否则为0，代表错误。keepTime作为这行数据生成的时间，数据库字段类型是datatime，需要精确到秒钟。还有就是点了这个单选框除了提交数据以外，可以自动翻到下一页轮播图

<template>
    <swiper class="swiperhei" :indicator-dots="false" :autoplay="false"  >
        <swiper-item v-for="(item,index) in timuList.list" :key="index">
            <view class="timu">
                {{index+1}}.{{item.answerTitle}}
            </view>
            <view class="xuanxiang">
                <radio><span class="spanone">A.{{item.answerOptiona}}</span></radio>
                <radio><span class="spanone">B.{{item.answerOptionb}}</span></radio>
                <radio><span class="spanone">C.{{item.answerOptionc}}</span></radio>
                <radio><span class="spanone">D.{{item.answerOptiond}}</span></radio>
            </view>
        </swiper-item>
    </swiper>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
// 引入查询全部题的api
import { onelistallApi,addKeepApi } from '../../api/index.js';
//题目数据
const timuList = reactive({
    list: []
});
//查询题目数据
const getList = async () => {
    let res = await onelistallApi({
        goodsId: uni.getStorageSync('goodsId')
    });
    console.log(res);
    if (res && res.code == 200) {
        timuList.list = res.data;
    }
};
//新增答题记录
const addKeep = async () => {
    //answerAbcd字段是答案，先做一个判断，如果answerAbcd和radio选中的数据相同,就代表正确，值为1，传递给下面的keepState
    let res = await addKeepApi({
        keepId:'',
        answerId:answerId.value,
        keepState:,
        keepTime:,//这个表单生成的时间
        openid:uni.getStorageSync('openid')
    });
    console.log(res);
    if (res && res.code == 200) {
        timuList.list = res.data;
    }
};
onLoad(() => {
    getList();
});
</script>

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题解答： 要实现点击单选框，自动提交数据到后端，同时实现自动翻到下一页轮播图，需要在单选框的change事件中触发提交数据和翻页的操作。具体实现步骤如下：

1. 在单选框的change事件中，获取选中的答案，并与题目的正确答案进行比较，得出keepState值（1表示正确，0表示错误），同时获取当前时间，生成keepTime值。
2. 向后端提交数据，包括answerId、keepState和keepTime，其中keepId可以由后端自动生成。可以使用axios库来发送POST请求，示例代码如下：

import axios from 'axios';
const addKeep = async () => {
  let answer = document.querySelector('input[name="answer"]:checked');
  let answerAbcd = answer.value;
  let index = answerAbcd.charCodeAt() - 'A'.charCodeAt();
  let answerId = timuList.list[currentIndex].answers[index].answerId;
  let keepState = answerAbcd === timuList.list[currentIndex].rightAnswer ? 1 : 0;
  let keepTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
  let res = await axios.post('/api/addKeep', {
    answerId,
    keepState,
    keepTime
  });
  if (res && res.code === 200) {
    console.log('提交成功');
  }
};

1. 在提交数据之后，利用swiper组件提供的API，调用swiper的next方法实现翻页操作，示例代码如下：

import { ref } from 'vue';
const currentIndex = ref(0);
const handleChange = () => {
  addKeep();
  swiperRef.value.next();
  currentIndex.value += 1;
};
<template>
  <swiper class="swiperhei" :indicator-dots="false" :autoplay="false" ref="swiper">
    <swiper-item v-for="(item, index) in timuList.list" :key="index">
      <view class="timu">{{ index+1 }}. {{ item.answerTitle }}
      </view>
      <view class="xuanxiang">
        <radio-group @change="handleChange">
          <radio class="spanone" value="A">{{ item.answerOptiona }}</radio>
          <radio class="spanone" value="B">{{ item.answerOptionb }}</radio>
          <radio class="spanone" value="C">{{ item.answerOptionc }}</radio>
          <radio class="spanone" value="D">{{ item.answerOptiond }}</radio>
        </radio-group>
      </view>
    </swiper-item>
  </swiper>
</template>

注意事项： 1. 为了方便获取选中的答案，需要给每个单选框设置相同的name属性和不同的value属性。 2. 为了实现翻页操作，需要给swiper组件添加ref属性，并在handleChange方法中获取这个组件的引用。 3. 在提交数据之前需要先获取当前题目的答案列表和正确答案，并根据选中的答案获取相应的answerId值。