javascript - 从vue js中的多选框中检索选定的值
问题描述
我很难从 Vue 的多选框中检索值。在用户选择了任意数量的值后,我想检索这些值并提交到数据源。到目前为止没有运气。下面是我的代码的摘录。
<div id="app">
<select multiple v-bind:data-id="program.id" :disabled="!program.editable" v-model="program.dropDowns">
<option>Microsoft</option>
<option>IBM</option>
<option>Google</option>
<option>Apple</option>
</select>
</div>
getPrograms: function() {
axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
this.programs = response.data.map(row => ({
...row,
dateFormatted: toDDMMYY(row.Date),
editable: false,
dropDowns: ["Apple","Google"]
}));
console.log(this.programs)
})
.catch(function(error) {
console.log(error);
});
}
任何帮助将非常感激。这是真正的笔
解决方案
只是您错误地分配了下拉数据,需要更改如下:
模板变化不大:
<button v-else @click="saveItem(program)">save</button>
和 saveItem() 方法如下:
saveItem (program) {
program.isReadOnly = true
program.editable = false
console.log(program)
alert(program.dropDowns)
}
推荐阅读
- android-studio - zxing 条码未使用导入语句
- dart - Flutter:如何使用 Image 插件调整图像大小
- python - 识别同一行中最接近1000、2000的x、y坐标
- c# - 将(总和)添加到列值中,而不是更新/替换现有值
- elasticsearch - 用于获取图形邻接列表的所有节点的 Elasticsearch 查询(在 javascript 中构建图形)
- asp.net-mvc - 如何将 Google Cloud ASP.NET Framework 实例连接到托管在 Oracle Cloud 上的数据库实例?
- google-apps-script - 谷歌脚本给出未知错误
- node.js - 需要帮助来存储正在为 Alexa Skill 播放的曲目的状态
- python - Python 错误:字节索引必须是整数或切片,而不是 str
- asp.net - 无法迁移 IdentityModels.cs [macOS]