Utilizing a codepen sample with local data, I am hoping it will work for troubleshooting purposes. However, in reality, I am using vuex and an API endpoint to source the data. Unfortunately, I cannot share the API details.
The core functionality involves retrieving a collection of application numbers from the API and displaying them as removable chips. The form, which is not displayed in the example, allows users to add more applications to this list seamlessly. Adding new applications works flawlessly; however, removing an application poses a challenge.
If a user accidentally inputs an application, they should be able to click on the X within the chip to delete it, requiring approval by a manager. While I haven't implemented the managerial approval feature yet, I believe I can accomplish it once I address the current issue at hand.
To remove the correct application, it's crucial to capture the one clicked by the user so that it can be passed to the API for removal. Although I'm successful in capturing the correct application in a console.log statement, I'm facing difficulties in capturing it within the modal dialog. How can this be achieved?
<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>
Within my script:
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 selected application
},
remove (applications) {
console.log(`${applications} has been removed`)
this.removeApplication = true
},
}
})
Explore the codepen playground for further insight. Thank you for your help!