In VueJS and Quasar, what is the best way to retrieve the clicked item in order to pass it to the API?

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!

Answer №1

In the scenario where each chip corresponds to a specific form, clicking on a chip toggles the display of the last added form/card. However, a more efficient approach would involve using a single form and reusing it.

To address this issue, I leveraged a computed property and the model. While my knowledge of Quasar is limited, I couldn't find a direct way to toggle visibility based on whether an object is set. It seemed essential to employ a model with a boolean value for this purpose. Therefore, I enclosed the card content with a v-if statement to ensure that selectedApplication.value is only rendered when selectedApplication is not null.

<!--
  Code snippet adapted 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">
                        Provide 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() {
            //functionality to remove the selected application
        },
        remove (index) {
            this.selection = index;
            var application = this.applications[index]
            this.selection = index;
            console.log(`${application.value} has been removed`)
            this.removeApplication = true
        },
    }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to determine the number of syllables in text as it is being typed?

Working on a React-based web app, I am trying to determine the number of syllables in a textarea as the user types. Encountering errors like "cannot find length of a null" at every turn. Right now, all I want is to utilize console.log() for troubleshooti ...

Obtaining the current ID from a URL in an API using Axios with Vue.js

When the user clicks the button, I want them to be able to block another user. This means that the URL should have a dynamic value for the user's id: http://example/user/:id. This is my template: <template> <div class> <div ...

The module cannot be located, despite my efforts to reinstall and verify all addresses, the error still persists

Error in showStudent component: Module not located: Unable to resolve '@material-ui/data-grid' in 'C:\Users\USER\Desktop\Database\client\src\components\showStudent' The code in the showstudent ...

Identifying browsers with Zend Framework versus JavaScript

Currently, I am working on developing an application that demands the capability to upload large files. After much consideration, I have opted to utilize the FormData object as it allows me to provide progress updates to the user. Sadly, Internet Explorer ...

What issues are hindering the successful export of my Vue component packaged with npm?

I created a small local npm package called fomantic-ui-vue with the following main js file: import Vue from 'vue' // Import vue component import button from './elements/button/button.vue' import buttonGroup from './elements/butt ...

What is the best way to dynamically assign an id to an ajax Actionlink in ASP.NET?

I have a collection of items and each item contains an Ajax.ActionLink. I would like to dynamically set the id for each action link based on the item's id. @Ajax.ActionLink("Join","ajaxview", new{id = tour.TourId}, new { HttpMethod = "GET", Insertion ...

Enhance your user interface by incorporating badges into specific elements using Bootstrap version 5.2

I am currently using the most recent version of Bootstrap v5.2 and Vue 3 (for learning purposes). While searching on Stackoverflow, I came across a similar question, but it was related to an older Bootstrap version. In my project, I have a select element ...

Issue with Bootstrap Table Style When Using window.print();

The color of my Bootstrap table style is not displaying correctly in the print preview using window.print(). Here is a screenshot showing that the table style is not working properly: https://i.stack.imgur.com/eyxjl.jpg Below is the code I am using: < ...

What is the best way to retrieve the parent of the initial jQuery object?

At the bottom of a lengthy table containing multiple button.enter-match elements, I am using the following code: $("button.enter-match") .button() .on('click', function() { $("form.enter-match").dialog({ modal: true, height: ...

Dynamic text displayed on an image with hover effect using JavaScript

Currently, I am in the process of developing a website for a coding course that is part of my university curriculum. The project specifications require the use of JavaScript, so I have incorporated it to display text over images when they are hovered over ...

Do API applications require a session to function properly?

I am in the process of developing an API and I am unsure whether I should implement express-session or a similar tool to handle sessions. app.use(expressSession({ secret: 'Something' }); Moreover, I have been blocking CORS. Is this measure suf ...

The Node gracefully disconnects and apologizes: "I'm sorry, but I can't set headers after they have already

events.js:160 throw er; // Unhandled 'error' event ^ Error: Can't set headers after they are sent. register.js:20:18 register.js user.save(function(err) { if(err){ return mainFunctions.sendError(res, req, err, 500, ...

retrieve the value of an HTML element once it has been modified

When I am working in a view, I encounter an issue where I need to retrieve the value of an HTML input box after it has been changed. Initially, the page loads with the following code: <input id="input_one" type="text" value = "apple" /> Upon loadin ...

Tips for modifying a request api through a select form in a REACT application

Apologies if this question seems a bit basic, but I need some help. I am working on creating a film catalog using The Movie Database API. I have successfully developed the home and search system, but now I am struggling to implement a way to filter the fi ...

navigating to the start of a hyperlink

I'm having issues with scrolling to anchors and encountering 3 specific problems: If I hover over two panels and click a link to one of them, nothing happens. When I'm on section D and click on section C, it scrolls to the end of section C. ...

The functionality of JQuery's `.on("click"... is sporadically functioning

I have a code block that dynamically generates elements and includes event handling. However, the event handling sometimes works and other times it doesn't. I'm not sure how to debug this issue. Can someone help me figure out what might be causin ...

Find the JavaScript code that selects the previous value chosen

When working with a select in React, I am facing an issue where the console.log is returning the last value selected instead of the current one. For instance, if I select 4 followed by 3 and then 5, the code will display 1 (default value), then 4, and fin ...

Top destination for verifying permissions in vue.js

Within my Laravel/vue.js application, the initial page load results in a structure like this: <script> window.settings = {}; window.settings.user = {}; window.settings.user.timezone = 'Europe/Moscow'; w ...

Using NextJs to create a permanent redirect from the www version of a site to the non

I have developed a website using Nextjs (version 12.1.4). To enhance the SEO of my site, I want to create a permanent redirect from the www version to the non-www version. Typically, this can be achieved easily using nginx or an .htaccess file with apache. ...

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...