记uni-app中多重数组在子组件中更新页面问题（粗心所致，非问题）

简介

  如下图所示，传递一个对象到子组件中，让子组件渲染数据，同时将数据改变，这里面最恐怖的就是自定义的单选按钮。

  如下图所示，子组件数据这里面有两个数组，第一个数组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，结果页面当然不刷新。

   耗费了半天的功夫，竟然是这么一个点导致的，可笑可笑。