uniProject/components/questions/tiankong.vue

<template>
	<view v-if="question" class="phone-tiankong-box">
		<view>{{question.onlyNum}}、</view>
		<!-- 题干区域 -->
		<rich-text :nodes="question.name" class="phone-shiti-question"></rich-text>
		<!-- 选项区域 -->
		<view v-for="(item,index) in question.reply" class="tiankong-option-box" :key="index" :class="formatClass(index)">
			<text>填空{{index+1}}:</text>
			<input type="text" v-model="question.reply[index]" class="tk-answer-text" :placeholder="`请输入填空${index+1}答案`">
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		}
	})

	function formatClass(index) {
		if (props.showError) {
			return {
				active_right: props.question.result[index].some(item => item == props.question.reply[index]?props.question.reply[index].trim(): ''),
				showError: !props.question.result[index].some(item => item == props.question.reply[index]?props.question.reply[index].trim(): '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tiankong-option-box {
		margin-top: 10px;
	}
	.tk-answer-text {
		border: 1px solid #ccc;
		padding: 5px;
	}
</style>