我怎样才能捕获我点击的项目，以便我可以将它传递给 API - VueJS & Quasar

Question

我使用本地数据在 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提前致谢！

Answer 1

你有一对一的筹码关系要形成。当您单击任何筹码时，它会切换最后添加的 form/card。相反，您应该有一个表单并重复使用一个表单。

所以对于这个解决方案，我使用了计算模型。我不熟悉类星体，但还没有找到一种方法来根据是否设置对象来切换可见性，我认为它需要使用具有布尔值的模型。所以我也用 v-if 包装了卡片内容。这是必需的，否则即使 selectedApplication 为空，也会呈现 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
        },
    }
})

我怎样才能捕获我点击的项目，以便我可以将它传递给 API - VueJS & Quasar

How can I capture the item that I clicked on so I can pass it to the API - VueJS & Quasar

javascript

vue.js

vuejs2

quasar-framework