Как я могу вызвать модальный компонент внутри цикла V-For? - PullRequest
Новая
       60

Как я могу вызвать модальный компонент внутри цикла V-For?

0 голосов
/ 18 октября 2019

Я использую vuetify https://vuetifyjs.com/en/

Мой родительский компонент такой: 

<template>
  <v-container>
    ...
        <v-col
        v-for="(item, i) in items"
        :key="i"
        >
        <v-card
        >
            <v-app-bar dark color="grey">
            <v-toolbar-title>Weekly Schedule : {{item.name}}</v-toolbar-title>
            <div class="flex-grow-1"></div>
            <modal-datepicker :schedule="item"  />
            </v-app-bar>
        </v-col>
    ...
  </v-container>
</template>

<script>
import { mapState } from "vuex";
import modalDatepicker from "../views/modalDatepicker";
export default {
  components: {modalDatepicker},
};
</script>

Мой дочерний компонент такой: 

<template>
    <v-dialog
        :ref="dialog"
        v-model="modal"
        :return-value.sync="date"
    >
        <template v-slot:activator="{ on }">
            <v-btn color="success" dark v-on="on">Show datepicker</v-btn>
        </template>
        <v-row justify="center">
            <v-date-picker v-model="date" scrollable>
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
                <v-btn text color="primary">OK</v-btn>
            </v-date-picker>
        </v-row> 
    </v-dialog>
</template>

<script>
import { mapState } from "vuex";
import modalDatepicker from "../views/modalDatepicker";
export default {
  components: {modalDatepicker},
  props: ['schedule'],
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    modal: false,
  }),
  mounted() {
    console.log(this.schedule)
  },
};
</script>

Кодвыше работает, но кажется неэффективным. потому что каждый раз, когда цикл, он вызывает модальный диалог. Я хочу, чтобы модал вызывался только когда пользователь нажимает кнопку show datepicker

как мне это сделать?

1 Ответ

0 голосов
/ 18 октября 2019

Извинения за то, что я на своем мобильном телефоне. Рассматривали ли вы наличие модального в родительском компоненте вне цикла?

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

modal: {
    open: false,
    schedule: null }

По существу, тогда, когда вы нажимаете на кнопку, вы можетедобавьте v-click с функцией, которая управляет этими данными, которая, в свою очередь, обрабатывает содержимое в модале.

Затем в вашем указателе даты или модале есть функция для обработки обновления / закрытия, чтобы очистить эти данные и обработатьвсе, что вам нужно слишком снаружи.

Затем вы можете объединить это в один компонент.

Я вижу, что у вас есть vuex, вы также можете использовать vuex для управления своим модальным содержимым.

...