Как получить элемент, на который я нажал, чтобы передать его в API - VueJS & Quasar - PullRequest
Новая
       52

Как получить элемент, на который я нажал, чтобы передать его в API - VueJS & Quasar

0 голосов
/ 23 февраля 2020

Я создал образец в codepen с локальными данными. Надеюсь, что он все еще работает для устранения неполадок, но на самом деле я использую vuex и конечную точку API, которая содержит данные. Я просто не могу поделиться API, конечно.

В любом случае, поэтому я получаю набор номеров приложений из API и отображаю их в виде сменных чипов. Форма (не показанная в примере) имеет поле, в которое я могу добавить больше приложений в этот список. Эта часть отлично работает. Моя проблема заключается в удалении приложения.

Когда кто-то входит в приложение по ошибке, пользователь может щелкнуть X в чипе, чтобы удалить его, и менеджер может прийти и одобрить удаление. Та часть, которой я еще не получил, но я верю, что смогу сделать это, как только доберусь до тех пор, пока сначала пойму эту маленькую часть.

Чтобы удалить нужное приложение, мне нужно захватить то, на которое пользователь нажал, чтобы я мог передать его в API, а затем я могу выскочить () из состояния с мутацией. Обратите внимание, что я успешно записываю правильное приложение в 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
        },
    }
})

Вот игровая площадка Заранее спасибо!

1 Ответ

1 голос
/ 23 февраля 2020

У вас есть взаимно однозначное отношение фишек к форме. когда вы нажимаете на любую из фишек, она переключает последнюю добавленную форму / карту. Вместо этого вы должны иметь одну форму и повторно использовать одну форму.

Так что для этого решения я использовал вычисленную и модель. Я не знаком с квазаром, но не нашел способа переключать видимость в зависимости от того, задан ли объект, и я думаю, что для этого нужно использовать модель с логическим значением. Таким образом, я обернул содержимое карты с помощью v-if. Это было необходимо, потому что иначе selectedApplication.value будет отображаться, даже если selectedApplication равно нулю. 

<!--
  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
        },
    }
})
...