问题遇到的现象和发生背景
在做v-for循环调用方法时出现了无限调用的问题
问题相关代码,请勿粘贴截图
<el-carousel-item
v-for="(it, myIndex) in z"
:key="myIndex"
>
<div class="questions">
<span class="myBst">試題 {{ it.serial_num }} </span>
</div>
<div
class="annex"
v-if="it.attachments !== undefined && it.attachments.length > 0"
>
<el-button icon="el-icon-document" @click="onAnnex">{{
enclosure
}}</el-button>
</div>
<div
class="styLelAnnex"
v-show="myAnnex"
v-if="it.attachments !== undefined && it.attachments.length > 0"
>
<iframe
style="width: 100%; height: 100%"
:src="it.attachments[0].path"
></iframe>
</div>
<div class="Content">
<div class="topic">{{ it.title }}</div>
<div v-for="val in it.factors" :key="val.id" class="bJeCt">
<span class="mybJeCt">{{
val.serial_num + ":" + val.content
}}</span>
</div>
<div class="solution">
<div class="mySolution" :style="colorA">
<el-radio
v-model="radio"
label="A"
:disabled="disabledA"
@change="choose(it.serial_num, radio, myIndex)"
>
</el-radio>
<span
class="solutionA"
@click="myDeleteA(myIndex)"
:style="strikethroughA"
>{{ it.options[0].value }}
</div>
<div class="mySolution" :style="colorB">
<el-radio
v-model="radio"
:disabled="disabledB"
label="B"
@change="choose(it.serial_num, radio, myIndex)"
></el-radio>
<span
class="solutionA"
@click="myDeleteB(myIndex)"
:style="strikethroughB"
>{{ it.options[1].value }}
</div>
<div class="mySolution" :style="colorC">
<el-radio
v-model="radio"
:disabled="disabledC"
label="C"
@change="choose(it.serial_num, radio, myIndex)"
></el-radio>
<span
class="solutionA"
@click="myDeleteC(myIndex)"
:style="strikethroughC"
>{{ it.options[2].value }}
</div>
<div class="mySolution" :style="colorD">
<el-radio
v-model="radio"
:disabled="disabledD"
label="D"
@change="choose(it.serial_num, radio, myIndex)"
></el-radio>
<span
class="solutionA"
@click="myDeleteD(myIndex)"
:style="strikethroughD"
>{{ it.options[3].value }}
</div>
<div class="mySolution" :style="colorE">
<el-radio
v-model="radio"
:disabled="disabledE"
label="E"
@change="choose(it.serial_num, radio, myIndex)"
></el-radio>
<span
class="solutionA"
@click="myDeleteE(myIndex)"
:style="strikethroughE"
>{{ it.options[4].value }}
</div>
<div>
<div class="QuestionButton">
<el-button
v-show="PreviousQuestion"
icon="el-icon-arrow-left"
@click="arrowClick('left')"
>上一題</el-button
>
<el-button
v-show="NextQuestion"
icon="el-icon-arrow-right"
@click="arrowClick('right', it.serial_num, myIndex)"
>下一題</el-button
>
<el-button
:type="type"
:icon="icon"
@click="stamp(it.serial_num, myIndex)"
>{{ name }}</el-button
>
<el-button
v-if="it.serial_num == 50"
type="primary"
icon="el-icon-circle-check"
v-show="complete"
@click="Submit(it)"
>完成 及 遞交答案</el-button
>
</div>
</div>
<div class="prompt">提交所有答案前請通知監考員</div>
</div>
</div>
</el-carousel-item>
运行结果及报错内容
一直请求接口,导致页面崩溃
我想要达到的结果
正常渲染