javascript - 以编程方式将控件添加到空数组时独立操作控件 - VueJS
问题描述
我有一个空的,里面装满了用户的输入。添加这些项目(键入并按回车键)后,还会使用单选按钮获得选项列表(是和否)。我需要能够独立选择是或否。到目前为止,因为它们都共享相同的 v-model,所以当我修改它们中的任何一个时,它们都会改变。我怎样才能把它挑出来?
这是我的代码:
<div id="q-app">
<div class="q-pa-lg">
<q-input
outlined
label="Enter App Number"
style="margin-bottom:20px"
color="primary"
square
dense
type="text"
v-model="applicationbarcode"
@change="addApplication">
</q-input>
<div class="group" v-for="(appItem, index) in appList" :key="index">
<span>Application #: {{appItem}}</span>
<q-option-group
v-model="issuegroup"
:options="issueoptions"
color="primary"
inline
></q-option-group>
</div>
</div>
new Vue({
el: '#q-app',
provide() {
const menu = {};
Object.defineProperty(menu, "appList", {
enumerable: true,
get: () => this.appList
});
return { menu };
},
data () {
return {
appList: [],
applicationbarcode: "",
issuegroup: null,
issueoptions: [
{
label: 'Yes',
value: 'op1'
},
{
label: 'No',
value: 'op2'
}
]
}
},
computed: {
appAdded() {
return this.appList[this.applicationbarcode].index;
}
},
methods: {
addApplication: function(index) {
this.appList.push(this.applicationbarcode);
this.applicationbarcode = "";
}
}
})
这里也是你的游乐场。
解决方案
您需要存储各个项目的数据。最简单的方法(恕我直言)是转换appList
为对象数组(而不是字符串)
addApplication: function(index) {
this.appList.push({barcode: this.applicationbarcode, issuegroup: null});
this.applicationbarcode = "";
}
并更新模板以使用对象数组
<div class="group" v-for="(appItem, index) in appList" :key="index">
<span>Application #: {{appItem.barcode}}</span>
<q-option-group
v-model="appItem.issuegroup"
:options="issueoptions"
color="primary"
inline
></q-option-group>
</div>
或者,您可以为这些值设置另一个数组,但是如果您想开始删除项目,您可能需要担心匹配键/索引。
推荐阅读
- c# - 在不重新加载页面的情况下将数据加载到 MVC 视图中
- maven - mvn spring-boot:从命令石灰运行,但选择要运行的类
- javascript - vuejs - 如何删除 v-for 项中的数组项。元素?
- r - 为什么绘制日期时间直方图会导致整数溢出产生的 NA
- rundeck - 可以/如何在 Rundeck 中使用项目配置键作为作业参数
- php - 无法在 CodeIgniter 中更新和删除?
- python - 如何在 Scala 中实现 Python 的 norm.expect
- date - 检查前 5 个字符与 MM-DD 的批处理脚本
- android - 如何停止 BarcodeDetector
- docker - 将 Docker 容器大小从 rhel7 上的默认 10GB 增加