想要实现这样的效果:
方法如下:
因为复选框选出来的值为数组形式所以直接通过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="其他" 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,
}