简介
如下图所示，传递一个对象到子组件中，让子组件渲染数据，同时将数据改变，这里面最恐怖的就是自定义的单选按钮。
如下图所示，子组件数据这里面有两个数组，第一个数组topicReply，第二个数组question_stem，当界面单选时，修改的是question_stem数组中的内容，当内容改变时，刷新子组件页面。
完整版的数组格式如下，
{
"q_id": 18,
"topic_id": "",
"topicReply": [
{
"question_stem": [
{
"index": 1,
"input": false,
"value": "Kết quả tính toán_00",
"status": 1,
"imgPath": "",
"indexName": "A"
},
{
"index": 2,
"input": false,
"value": "南瓜饼",
"status": 1,
"imgPath": ""
}
],
"create_time": "2023-03-22T03:18:45.000+0000",
"topic_title": "Kết quả tính toán_0",
"topic_id": 134,
"topic_sort": 0,
"topic_type": "1",
"delete_flag": "0",
"q_id": 18,
"answer": []
},
{
"question_stem": [
{
"index": 1,
"input": false,
"value": "牛肉",
"status": 1,
"imgPath": ""
},
{
"index": 2,
"input": false,
"value": "西红柿鸡蛋",
"status": 1,
"imgPath": ""
},
{
"index": 3,
"input": false,
"value": "羊肉汤",
"status": 1,
"imgPath": ""
},
{
"index": 4,
"input": false,
"value": "南瓜粥",
"status": 1,
"imgPath": ""
},
{
"index": 5,
"input": false,
"value": "南瓜",
"status": 1,
"imgPath": ""
}
],
"create_time": "2023-03-22T03:18:45.000+0000",
"topic_title": "吃什么",
"topic_id": 135,
"topic_sort": 1,
"topic_type": "2",
"delete_flag": "0",
"q_id": 18,
"answer": []
},
{
"create_time": "2023-03-22T03:18:45.000+0000",
"topic_title": "餐厅地址",
"topic_id": 136,
"topic_sort": 2,
"topic_type": "3",
"delete_flag": "0",
"q_id": 18,
"answer": []
}
]
}代码段
子组件代码
简化版代码如下，重点是checkQRadio方法，当单选时，将所有都置为没选中，只有符合index才设置为选中，这样实现单选。
<template>
<view>
<!--问卷弹框-->
<swiper-item v-for="(questionInfo,index) in formData.topicReply" :key="index">
<!--单选-->
<radio-group>
<view v-for="(item,index2) in questionInfo.question_stem" :key="index2">
<view @click="checkQRadio(item,questionInfo,index2,index)">
<view :class="item.selectType?'checked':'unchecked'"></view>
</view>
<span>{{item.value}}</span>
</view>
</radio-group>
<!--多选-->
<checkbox-group name="checkbox">
<view v-for="(item,index2) in questionInfo.question_stem" :key="index2">
<view style="" @click="changeQCheckBox(item,questionInfo,index2,index)">
<image v-if="item.selectType"
src="/static/questionnaire/checkbox_select.png"></image>
<image v-else
src="/static/questionnaire/checkbox.png"></image>
</view>
<span style="">{{item.value}}</span>
</view>
</checkbox-group>
</swiper-item>
</view>
</template>
<script>
import {
answer,
} from '@/apis/question.js'
export default {
name: "cust-question",
props: {
formDataOut: Object,
},
data() {
return {
answerCount: 0, //当前答题数
formData: { //答案
q_id: '',
topic_id: '',
topicReply: []
},
nowIndex: 0, //swiper的当前item
};
},
mounted() {
this.formData = this.formDataOut;
},
methods: {
checkQRadio(item1, item, innerIndex, outIndex) {
item1.selectType = !item1.selectType
var question_stem = item.question_stem
for (var i = 0; i < question_stem.length; i++) {
question_stem[i].selectType = false;
if (i == innerIndex) {
question_stem[i].selectType = true;
}
}
this.$set(this.formData.topicReply[outIndex].question_stem,innerIndex,item1)
this.$set(this.formData.topicReply, outIndex, item)
this.radioChangeOwn(innerIndex + 1, item)
},
changeQCheckBox(item1, item, innerIndex, outIndex) {
item1.selectType = !item1.selectType
item.selectIndex = [];
var question_stem = item.question_stem
for (var i = 0; i < question_stem.length; i++) {
if (question_stem[i].selectType) {
item.selectIndex.push(i + 1);
}
}
this.$set(this.formData.topicReply, outIndex, item)
this.checkboxChangeOwn(item1, item, outIndex);
},
radioChangeOwn(index, param) {
let answer = []
param.question_stem.forEach(item => {
if (item.index == index) {
answer.push(item)
}
})
param.answer = answer
this.changeAnswer()
},
checkboxChangeOwn(itemInner, param, index) {
let answer = []
param.question_stem.forEach(item => {
param.selectIndex.forEach(item1 => {
if (item.index == item1) {
answer.push(item)
}
})
})
param.answer = answer
this.changeAnswer()
},
textChange(evt, param) {
},
changeAnswer() {
},
//答题
doAnswer() {
ths.formData.topicReplyData = JSON.stringify(ths.formData.topicReply)
answer(this.formData).then(res => {
this.$emit("closePopup")
})
},
}
}
</script>父组件
注册并使用上述的子组件，cust-question，从而展示数据
<uni-popup ref="ownPopup">
<cust-question :formDataOut="formData" @closePopup="closeOwnPopup"></cust-question>
</uni-popup>子组件第二个数组更新后刷新子组件页面
在单选按钮时，死活无法刷新页面，但是数据其实是更新了的，一开始使用的是，如下代码，使用Console打印后，发现数据更新，页面没有更新，效果就如同下面这样，
this.$set(this.formData.topicReply, outIndex, item)我靠，写着写着突然发现，并不是上面$set方法无用，而是我在页面遍历时使用的question_stems，这个数组和question_stem是一样的，我改变了半天的question_stem，但是页面使用 question_stems 来for循环的，难怪会变成下面这个样子。
如下图所示，原来是我又搞了一个question_stems，然后页面question_stems来刷新，但是方法操作中使用question_stem，结果页面当然不刷新。
耗费了半天的功夫，竟然是这么一个点导致的，可笑可笑。