Vant3——复选框点击其他后格外出现一个输入框

想要实现这样的效果：


方法如下：
因为复选框选出来的值为数组形式所以直接通过map进行循环遍历即可

<van-field :name="'checkbox_ZL_'+i" label="接受过的治疗">
	<template #input>
		<van-checkbox-group v-model="checkboxZL" direction="horizontal" @click="btnCheckbox">
			<van-checkbox name="骨科手术" shape="square">骨科手术van-checkbox>
			<van-checkbox name="物理治疗" shape="square">物理治疗van-checkbox>
			<van-checkbox name="手法治疗" shape="square">手法治疗van-checkbox>
			<van-checkbox name="关节内注射治疗" shape="square">关节内注射治疗van-checkbox>
			<van-checkbox name="其他" shape="square">其他van-checkbox>
		van-checkbox-group>
	template>
van-field>

<div v-if="arrs == true">
<van-field  required label="接受过的治疗(其他)" placeholder="请填写具体内容" />div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

const listData = reactive({
	checkboxZL:[]
})
const btnCheckbox= () => {
	/* 把listData.checkboxZL数组定义出来 */
      let arr:any = listData.checkboxZL;
      console.log(arr);
      /* 防止默认没长度的时候会出错，默认就让他不出现 */
      if (arr.length == 0) {
        arrs.value = false;
      }
      /* 通过map遍历出arr的新数组 */
      arr.map((item: any) => {
        console.log(arr);
	/* 查找勾选的选项是否有存在其他？如果存在则让他显示出文本框，否则就隐藏 */
        if (arr.indexOf("其他") !== -1) {
          arrs.value = true;
        } else {
          arrs.value = false;
        }
      });
    };
    return{
    ...toRefs(listData),
    arrs,
    btnCheckbox,
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27