vuejs怎样遍历显示数组里的值？v-for嵌套循环

Question

            <el-form-item label="一、单选题:">
                <ol>
                    <li v-for="(item,index) in ruleForm.topics.singleChoiceData" :key="index">
                        <p>题目：{{item.question}}</p>
                        <ol type="A">
                            <li v-for="(item2,index2) in ruleForm.topics.singleChoiceData.answerList" :key="index2">
                                {{item2}}
                            </li>
                        </ol>
                        <p>答案：{{item.answer}}</p>
                    </li>
                </ol>
            </el-form-item>

赋值代码：

        getData() {
            console.log("试卷编号是：id==" + localStorage.getItem("examId"));
            this.$axios.get("/exam/findExamById", {params: {id: localStorage.getItem("examId")}}).then(response => {
                console.log(response.data.result);
                if (response.data.result) {
                    // this.ruleForm = response.data.result;
                    console.log(typeof this.ruleForm);
                    var arr = response.data.result.topics;
                    this.ruleForm.topics = arr.map(item => {
                        return {
                            id: item.id,
                            description: item.description,
                            question: item.question,
                            answer: item.answer,
                            answerList: item.question.split('|||').slice(1),
                            type: this.typeNameTransformation(item.type),
                            categories: item.categories,
                            score: item.score,
                            time: item.time,
                            createTime: item.createTime,
                        };
                    });
                    this.ruleForm.total = response.data.result.total;
                    this.ruleForm.name = response.data.result.name;
                    this.ruleForm.description = response.data.result.description;
                    this.ruleForm.personal = response.data.result.personal;
                    localStorage.setItem("examIsPersonal", this.personal);
                    this.ruleForm.topics.singleChoiceData = arr.filter(item => {
                        return item.type === 'SINGLE_CHOICE';
                    });
                    this.ruleForm.topics.multipleChoiceData = arr.filter(item => {
                        return item.type === 'MULTIPLE_CHOICE';
                    });
                    this.ruleForm.topics.judgeData = arr.filter(item => {
                        return item.type === 'JUDGE';
                    });
                    this.ruleForm.topics.completionData = arr.filter(item => {
                        return item.type === 'COMPLETION';
                    });
                    this.ruleForm.topics.questionAndAnswerData = arr.filter(item => {
                        return item.type === 'QUESTION_AND_ANSWER';
                    });
                    console.log(this.ruleForm.topics);
                    console.log(this.ruleForm.topics.singleChoiceData);
                    // this.allTopicTransformation(this.ruleForm.topics);
                    this.completionDataTransformation(this.ruleForm.topics.completionData);
                    // console.log(response.data.result.topics.singleChoiceData);
                    console.log(this.ruleForm.topics.singleChoiceData);
                    console.log(typeof this.ruleForm.topics.singleChoiceData);
                    console.log("等到这个页面的数据多了之后，需要再检查一下分页是否正常！");
                } else {
                    console.log("获取题目信息失败： " + response.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
            })
        }
    },

这个代码为什么不生效？？？？？？

数组不是这样取值的吗？

Answer 1

我看你的数据结构，这里不应该是这样吗

<li v-for="(item2,index2) in item.answerList" :key="index2">
   {{item2}}
</li>

Answer 2

是不是你的赋值方式有问题呀，直接给对象属性赋值不会触发页面更新。
能把你给ruleForm赋值的代码贴出来吗

你的赋值方式有问题：

你请求到数据以后，先不要给ruleForm赋值，例这个topics属性,
你先定义一个变量topics（名字随意，你知道意思就行），
const topics = arr.map(.......);
然后再赋值给ruleForm的topics属性：
this.$set(this.ruleForm, "topics", topics);
用这种方式，才会触发dom的更新，直接修改对象的属性是不会触发dom更新的，其它属性同理。