深圳网站seo建设,定制网站多少钱,优化模型的推广,延吉市建设厅网站问#xff1a;
现在有一个el-select#xff0c;
后端接口返回数据为keyword:xxx,referenceNum:1,tagId:132sf32fasdfaf组成的数组#xff0c;
现在select是多选#xff0c;
但是但我选择多个下拉框选项后#xff0c;后端需要前端返回的数据tagIds字段需要时一个字符串…问
现在有一个el-select
后端接口返回数据为keyword:xxx,referenceNum:1,tagId:132sf32fasdfaf组成的数组
现在select是多选
但是但我选择多个下拉框选项后后端需要前端返回的数据tagIds字段需要时一个字符串比方132sf32fasdfaf,132sf32fasdfaf,132sf32fasdfaf这样的字符串中间逗号要是英文的逗号请问怎么写我使用的是vue3的setup语法
[{keyword: sdfafdaasd8164561,xxx: xxx,xxx: xxx,},{keyword: sdfafdaasd8164561,xxx: xxx,xxx: xxx,},{keyword: sdfafdaasd8164561,xxx: xxx,xxx: xxx,},{keyword: sdfafdaasd8164561,xxx: xxx,xxx: xxx,},{keyword: sdfafdaasd8164561,xxx: xxx,xxx: xxx,},
]
假设当前选中了五个多选el-select
回答
你可以使用 el-select 的 change 事件来监听选项的变化然后将选中的选项的 tagId 提取出来并拼接成一个字符串。
如果 selectedTags 是一个字符串而不是数组那么你需要先将其转换为数组然后再进行处理。以下是修改后的代码
templatedivel-selectv-modelselectedTagsmultiplechangehandleChangeplaceholder请选择el-optionv-foritem in options:keyitem.tagId:labelitem.keyword:valueitem.tagId/el-option/el-select/div
/templatescript setup
import { ref } from vue;const options ref([{ keyword: xxx1, referenceNum: 1, tagId: 132sf32fasdfaf1 },{ keyword: xxx2, referenceNum: 2, tagId: 132sf32fasdfaf2 },{ keyword: xxx3, referenceNum: 3, tagId: 132sf32fasdfaf3 }
]);const selectedTags ref();const handleChange (value) {selectedTags.value value.join(,);console.log(selectedTags.value); // 输出拼接后的字符串// 你可以在这里将 selectedTags.value 发送给后端
};
/script
在这个示例中我们将 el-select 的 value 绑定到 item.tagId这样 selectedTags 将是一个包含 tagId 的数组。在 handleChange 方法中我们将数组转换为用英文逗号分隔的字符串并将其赋值给 selectedTags。这样就可以正确地拼接用户选择的选项的 tagId
