0

Вопрос такой: есть карточки сервисов (которые заполняются запросом с бека) и есть кнопка удалить (по клику которой вызывается метод removeSerivce) Метод удаляет сервис на беке по айди и так-же удаляет карточку реактивным методом splice. Всё хорошо, но возникла потребность сделать окно подтверждения (вы точно уверены что хотите удалить?). И я застрял на этом вопросе, так-как не могу передать индекс элемента массива да и сам элемент внутрь этого окна! Всё перепробовал и никак...подскажите как это сделать проще всего плз! Спасибо!

Мой компонент

<v-col v-for="(service,index) in allServices"
                           :key="service.id">
                            <v-card-actions>
                                <v-btn
                                        text
                                        color="deep-purple accent-4"
                                        @click="
                                         "
                                >
                                    Редактировать
                                </v-btn>
                                <v-dialog
                                        v-model="dialog"
                                        width="500"
                                >
                                    <template v-slot:activator="{ on }">
                                        <v-btn
                                                text
                                                color="deep-purple accent-4"
                                                dark
                                                v-on="on"
                                        >
                                            Удалить
                                        </v-btn>
                                    </template>

                                    <v-card>
                                        <v-card-title
                                                class="headline red lighten-2"
                                                primary-title
                                        >
                                            Вы уверены?
                                        </v-card-title>

                                        <v-card-text>
                                                Фид будет удалён вместе с площадкой!
                                          </v-card-text>

                                        <v-divider></v-divider>

                                        <v-card-actions>
                                            <div class="flex-grow-1"></div>
                                            <v-btn
                                                    color="primary"
                                                    text
                                                    @click="
                                                    removeService(service,index)
                                                    dialog = false"
                                            >
                                                Удалить
                                            </v-btn>
                                            <v-btn
                                                    color="primary"
                                                    text
                                                    @click="
                                                    dialog = false"
                                            >
                                                Отмена
                                            </v-btn>

                                        </v-card-actions>
                                    </v-card>
                                </v-dialog>

                            </v-card-actions>
                        </v-card>
                    </v-col>

Мой метод:

export default {
    name: "ServiceCardList",
    methods: { 
        removeService: function (service,index) {
            axios.get('/api/services/delete/'+service.id, {})
                .then((response) => {
                    this.allServices.splice(index, 1);
                })
        }

    },
13
  • Метод у Вас принимает индекс элемента. В чем проблема передать в модальное окно этот элемент this.allServices[index]?
    – Dmytro
    30 сен 2019 в 14:47
  • так не вышло пишет что null 30 сен 2019 в 18:48
  • removeService(service,index) - работает только так (но индекс null) поэтому удаляется 0 элемент массива 30 сен 2019 в 18:50
  • 1
    У Вас еще проблема в том, что метод removeService из диалового окна. Я бы так не делал. Как мне кажется, из диалогового окна, Вы должны получить true/false, а потом уже вызывать или нет removeService.
    – Dmytro
    1 окт 2019 в 7:03
  • 1
    Не нужны здесь промисы. Разбейте задачу на действия. 1) по клику открываете диалоговое окно 2) По закрытию окна - фиксируете результат 3) Решаете - удалять или нет
    – Dmytro
    1 окт 2019 в 9:52

2 ответа 2

0

Решил проблему передачи индекса путём того, что вынес моё модальное окно в другой компонент и передал ему мои service и index.

Это теперь находится на месте моей кнопки и окна:

<dialog-window :removeService="removeService" :service="service" :index="index" :dialog="dialog"/>

А это сам компонент DialogWindow:

<template>
    <div>
        <v-dialog
                v-model="dialog"
                width="500"
        >

            <template v-slot:activator="{ on }">
                <v-btn
                        text
                        color="deep-purple accent-4"
                        dark
                        v-on="on"
                >
                    Удалить
                </v-btn>
            </template>



            <v-card>
                <v-card-title
                        class="headline red lighten-2"
                        primary-title
                >
                    Вы уверены?
                </v-card-title>

                <v-card-text>
                    Фид <b>{{service.name}}</b> будет удалён вместе с площадкой!
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <div class="flex-grow-1"></div>
                    <v-btn
                            color="primary"
                            text
                            @click="removeService(service,index) ,dialog = false"
                    >
                        Удалить
                    </v-btn>
                    <v-btn
                            color="primary"
                            text
                            @click="dialog = false"
                    >
                        Отмена
                    </v-btn>

                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        name: "DialogWindow",
        props: ['service','index', 'removeService','dialog'],

    }
</script>

Знаю, что решение не очень то и верное ,так-как на каждый элемент будет создаваться своё модальное окно, но в моём случае компонентов не много. И ещё возникла проблема со свойством dialog (которое отвечает за вызов самого окна). Но её можно решить легко. Вообщем, результатом я доволен. Но в будущем собираюсь разрешить эту проблему (по мере понимания самого Vue).

0

Я сделал так, берите в учет, что мое приложение отличается от приложения автора:

Создал компонент модального окна в который поместил дочерний компонент

<baseModal v-if="isModalShow">
      <editFav
        @showModal="showModal"
        :fav="this.choosedFav"
        :index="this.choosedIndex"
      />
 </baseModal>

У родительского компонента добавил необходимых для передачи в дочерний компонент переменных

data() {
    return {
      favs: [],
      isModalShow: false,
      choosedFav: null,
      choosedIndex: null
    };
  }

Ну и повесил обработчик на элемент из списка v-for="(fav, index) in favs"

<div class="favorites__edit-icon" @click="showModal(fav, index)">
  <i class="el-icon-edit"></i>
</div>

И собственно код функции showModal(fav, index)

    showModal(fav, index) {
      if (fav) {
        this.choosedFav = fav;
        this.choosedIndex = index;
      }
      this.isModalShow = !this.isModalShow;
    }

При клике на элемент из списка функция showModal(fav, index) меняет значение выбранных элементов choosedFav choosedIndex, а также isModalShow становится равен true, после чего отображается модальное окно и в дочерний компонент передаются вышеназванные переменные

Вообще, как я понимаю, автор сделал почти так же, только компонент модального окна он отдает каждому элементу списка, а я же вынес модальное окно за список

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.