uniProject/components/questionsChengji/jianda.vue

<template>
	<view v-if="question" class="phone-jianda-box">
		<view class="phone-shiti-question">
			<view class="question-num">{{question.onlyNum}}、</view>
			<!-- 题干区域 -->
			<rich-text :nodes="question.name"></rich-text>
		</view>
		<!-- 选项区域 -->
		<textarea class="jianda-textarea-box" placeholder="请输入内容" v-model="question.reply" />
		
		<view class="phone-question-answer-box">
			<view class="mb10">正确答案：</view>
			<view class="green-color">{{data.result}}</view>
			<view class="mb10">您的答案：</view>
			<view  class="orange-color" v-if="data.reply">{{data.reply}}</view>
			<view class="btdf-row">本题得分：<text>{{data.score}}</text>分</view>
			<view class="dajx-row">答案解析: 
				<rich-text :nodes="data.answer"></rich-text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		}
	})
	const data = reactive({
		name: '', //题干数据
		score: '', 
		result: '', 
		reply: '', 
		answer: '', 
		contents: [], // 选项数据
	})
	watch(() => props.question, (val) => formatData(val), {
		immediate: true
	})
	function formatData(val) {
		if (val) {
			console.log('val',val);
			data.name = val.name;
			data.answer = val.answer;
			data.score = val.score;
			data.reply = val.reply;
			data.result = val.result;

		}
	}
</script>