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

<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="其他" v-model="others" name="others" placeholder="请填写具体内容" />
</div>

const listData = reactive({
  checkboxZL:[],
  others:"",
  arrs:false
})
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,
    }