如图,有复选框和文本,在提交按钮之后,怎么根据选中的多个复选框得到所对应的文本的数组
2条回答 默认 最新
- 发狂精灵 2023-10-14 15:39关注
首先你肯定要在数组里面添加上布尔值的属性绑定到复选框中,然后提交时去过滤属性值为true下的文本就行了,参考一下GPT示例
<template> <div> <div v-for="(list, index) in List" :key="index"> <input type="checkbox" v-model="list.checked"> <!-- 使用v-model绑定复选框的选中状态 --> {{ list.text }} </div> <button @click="handleSubmit">提交</button> </div> </template> <script> export default { data() { return { List: [ { text: '文本1', checked: false }, { text: '文本2', checked: false }, { text: '文本3', checked: false }, // 其他列表项... ], selectedTexts: [] // 存储选中的文本 }; }, methods: { handleSubmit() { this.selectedTexts = []; // 清空选中的文本数组 for (let i = 0; i < this.List.length; i++) { if (this.List[i].checked) { // 如果复选框被选中 this.selectedTexts.push(this.List[i].text); // 将对应的文本添加到数组中 } } console.log(this.selectedTexts); // 在这里可以访问选中的文本数组,进行后续操作 } } }; </script>
解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 QQ邮箱过期怎么恢复?
- ¥15 登录他人的vue项目显示服务器错误
- ¥15 (标签-android|关键词-app)
- ¥60 如何批量获取json的url
- ¥15 comsol仿真压阻传感器
- ¥15 Python线性规划函数optimize.linprog求解为整数
- ¥15 llama3中文版微调
- ¥15 pg数据库导入数据序列重复
- ¥15 三分类机器学习模型可视化分析
- ¥15 本地测试网站127.0.0.1 已拒绝连接,如何解决?(标签-ubuntu)