我使用本地数据在 codepen 中创建了一个示例。希望它仍然适用于您进行故障排除，但我实际上使用的是 vuex 和包含数据的 API 端点。我当然不能分享API。
无论如何，我正在从 API 检索申请号的集合并将它们显示在可移动芯片中。该表单(示例中未显示)有一个字段，我可以将更多应用程序添加到此列表中。那部分工作正常。我的问题是删除一个应用程序。
当有人错误输入申请时，用户可以点击芯片中的X将其删除，然后经理可以过来批准删除。这部分我还没有完成，但我相信一旦我到达那里，只要我先弄清楚这一小部分，我就可以做到。
为了删除正确的应用程序，我需要捕获用户单击的应用程序，以便我可以将其传递给 API，然后我可以将其从突变状态中 pop() 出来。请注意，我成功地在 console.log 中捕获了正确的应用程序，但无法在模式对话框中捕获它。我怎样才能做到这一点？
<div id="q-app">
<div class="q-pa-md">
<span v-for="(batch, index) in applications" :key="index">
<q-chip removable dense outline color="grey-9" @remove="remove(batch.value)">
{{batch.value}}
</q-chip>
<!-- Manager Approval Dialog -->
<q-dialog v-model="removeApplication" persistent>
<q-card class="q-pa-lg" style="width: 600px">
<q-card-section class="row justify-center items-center">
<span class="q-ml-sm">
Enter your manager credentials to remove application number: {{batch.value}} from the current batch.
</span>
<q-form @submit="onSubmit" class="q-gutter-md q-mt-md" style="width: 100%">
<div class="row items-start justify-center">
<label class="col-4 text-weight-medium form-label">Admin Username:</label>
<div class="col-8">
<q-input
outlined
v-model="username"
color="cts-purple-faint"
bg-color="cts-purple-faint"
square
dense
type="text"
id="username">
</q-input>
</div>
</div>
<div class="row items-start justify-center">
<label class="col-4 text-weight-medium form-label">Admin Password:</label>
<div class="col-8">
<q-input
outlined
color="cts-purple-faint"
bg-color="cts-purple-faint"
square
dense
type="password"
v-model="password">
</q-input>
</div>
</div>
</q-form>
</q-card-section>
<q-card-actions align="right" class="q-pa-lg">
<q-btn label="Decline" color="secondary" v-close-popup></q-btn>
<q-btn label="Approve" color="primary" type="submit" v-close-popup></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</span>
</div>
</div>
在我的脚本中
new Vue({
el: '#q-app',
data() {
return {
appsinbatch:{
applications:[
{"value": 741000, "selected": true },
{"value": 742000, "selected": true },
{"value": 743000, "selected": true }
]
},
username: "",
password: "",
removeApplication: false,
}
},
computed: {
applications() {
return this.appsinbatch.applications;
},
},
methods: {
onSubmit() {
//remove the application selected
},
remove (applications) {
console.log(`${applications} has been removed`)
this.removeApplication = true
},
}
})
这是codepen playground提前致谢!
最佳答案
您需要形成芯片的一对一关系。当您单击任何一个筹码时，它会切换最后添加的表格/卡片。相反，您应该拥有一个表单并重复使用一个表单。
因此，对于这个解决方案，我使用了计算模型。我不熟悉类星体，但还没有找到一种根据是否设置对象来切换可见性的方法，并且我认为它需要使用具有 bool 值的模型。所以我也用 v-if-包裹了卡片内容。这是必需的，因为否则即使 selectedApplication 为 null，selectedApplication.value 也会被渲染。
<!--
Forked from:
https://quasar.dev/vue-components/chip#Example--Outline
-->
<div id="q-app">
<div class="q-pa-md">
<q-chip removable dense outline color="grey-9"
@remove="remove(index)"
v-for="(batch, index) in applications"
:key="index"
>{{batch.value}}</q-chip>
<!-- Manager Approval Dialog -->
<q-dialog v-model="removeApplication" persistent>
<q-card class="q-pa-lg" style="width: 600px" v-if="selectedApplication">
<q-card-section class="row justify-center items-center">
<span class="q-ml-sm">
Enter your manager credentials to remove application number: {{selectedApplication.value}} from the current batch.
</span>
<q-form @submit="onSubmit" class="q-gutter-md q-mt-md" style="width: 100%">
<div class="row items-start justify-center">
<label class="col-4 text-weight-medium form-label">Admin Username:</label>
<div class="col-8">
<q-input
outlined
v-model="username"
color="cts-purple-faint"
bg-color="cts-purple-faint"
square
dense
type="text"
id="username">
</q-input>
</div>
</div>
<div class="row items-start justify-center">
<label class="col-4 text-weight-medium form-label">Admin Password:</label>
<div class="col-8">
<q-input
outlined
color="cts-purple-faint"
bg-color="cts-purple-faint"
square
dense
type="password"
v-model="password">
</q-input>
</div>
</div>
</q-form>
</q-card-section>
<q-card-actions align="right" class="q-pa-lg">
<q-btn label="Decline" color="secondary" v-close-popup></q-btn>
<q-btn label="Approve" color="primary" type="submit" v-close-popup></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</div>
new Vue({
el: '#q-app',
data() {
return {
appsinbatch:{
applications:[
{"value": 741000, "selected": true },
{"value": 742000, "selected": true },
{"value": 743000, "selected": true }
]
},
selection: null,
username: "",
password: "",
removeApplication: false
}
},
computed: {
applications() {
return this.appsinbatch.applications;
},
selectedApplication() {
if (Number.isInteger(this.selection) && this.selection < this.applications.length){
this.removeApplication = true;
return this.applications[this.selection];
}
this.removeApplication = false;
return false
},
},
methods: {
onSubmit() {
//remove the application selected
},
remove (index) {
this.selection = index;
var application = this.applications[index]
this.selection = index;
console.log(`${application.value} has been removed`)
this.removeApplication = true
},
}
})
关于javascript - 如何捕获我点击的项目，以便将其传递给 API - VueJS 和 Quasar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60363361/