fix: 修复客户端多选题传参失败的问题 (#102)

zjutjh · Oct 10, 2024 · d57c678 · d57c678
1 parent fbf89b1
commit d57c678
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/src/pages/View/checkbox.vue b/src/pages/View/checkbox.vue
@@ -4,7 +4,11 @@
       <div class="flex-col">
         <div class="flex items-center gap-20">
           <span class="lg:text-xl md:text-md">{{ props.serial_num }}</span>
-          <span class="lg:text-xl md:text-md flex gap-5 items-center" >{{ props.title }} <el-tag type="primary" class="ml-5">多选</el-tag> <el-tag type="warning" v-if="!required">选答</el-tag> <el-tag type="danger" v-if="localUnique">唯一</el-tag></span>
+          <span class="lg:text-xl md:text-md flex gap-5 items-center" >{{ props.title }}
+            <el-tag type="primary" class="ml-5">多选</el-tag>
+            <el-tag type="warning" v-if="!required">选答</el-tag>
+            <el-tag type="danger" v-if="localUnique">唯一</el-tag>
+          </span>
         </div>
         <div class="flex items-center mt-15 ml-10">
           <pre  class="text-sm text-gray-500 break-all">{{ props.describe }}</pre>
@@ -25,7 +29,7 @@
         </div>
       </div>
       <div class="flex gap-10 mt-10" v-if="localOtherOption">
-        <input type="checkbox" :name="props.serial_num" class="my-5" style="zoom: 140%" :value="otherAnswer" id='other'  @click='otherAnswerChecked = !otherAnswerChecked'/>
+        <input ref="otherCheckbox" type="checkbox" :name="props.serial_num" class="my-5" style="zoom: 140%" :value="otherAnswer"  @click='otherAnswerChecked = !otherAnswerChecked'/>
         <input type="text" class="input-sm w-150" placeholder="其他" v-model="otherAnswer" @input="updateOtherAnswer"  />
       </div>
     </div>
@@ -57,15 +61,17 @@ const otherAnswer = ref<string>('');
 const answerArr = ref<string[]>([]);
 const emits = defineEmits(['update:answer']);
 const otherAnswerChecked = ref(false)
+const otherCheckbox = ref<HTMLInputElement | null>(null);
 
 const deleteOldAnswer = () => {
   const otherIndex = answerArr.value.indexOf(otherAnswer.value);
   if (otherIndex !== -1) {
     answerArr.value.splice(otherIndex, 1);
   }
 }
+
 const updateOtherAnswer = (event: Event) => {
-  if(document.getElementById("other").checked === true) {
+  if (otherCheckbox.value && otherCheckbox.value.checked) {
     const value = (event.target as HTMLInputElement).value;
     deleteOldAnswer();
     otherAnswer.value = value;
@@ -78,7 +84,7 @@ const filteredAnswerArr = computed(() => {
 })
 
 watch(filteredAnswerArr, () => {
-  if(document.getElementById("other").checked === true && !answerArr.value.includes(otherAnswer.value)) {
+  if (otherCheckbox.value && otherCheckbox.value.checked && !answerArr.value.includes(otherAnswer.value)) {
     answerArr.value.push(otherAnswer.value)
   }
   console.log(filteredAnswerArr.value)
@@ -88,14 +94,15 @@ watch(filteredAnswerArr, () => {
 });
 
 watch(otherAnswer, (newOtherAnswer, oldOtherAnswer) => {
-  if (newOtherAnswer !== oldOtherAnswer && document.getElementById("other").checked === true) {
+  if (newOtherAnswer !== oldOtherAnswer && otherCheckbox.value && otherCheckbox.value.checked) {
     const otherIndex = answerArr.value.indexOf(oldOtherAnswer);
     if (otherIndex !== -1) {
       answerArr.value.splice(otherIndex, 1);
     }
     answerArr.value.push(newOtherAnswer);
   }
 })
+
 watch(otherAnswerChecked,() => {
   if(otherAnswerChecked.value) {
     if (!answerArr.value.includes(otherAnswer.value)) {