如何在 v-for 循环中调用模态组件？答案

【问题标题】：how can i call modal component inside a v-for loop?如何在 v-for 循环中调用模态组件？
【发布时间】：2020-02-14 20:26:03
【问题描述】：

我用 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>

上面的代码有效，但似乎效率低下。因为每次循环，它都会调用模态对话框。我希望仅在用户单击显示日期选择器按钮时才调用模态

我该怎么做？

【问题讨论】：

你能用最少的复制步骤创建一个codepen吗..
@chans 我已经解决了

标签： vue.js modal-dialog vue-component vuex vuetify.js

【解决方案1】：

抱歉，我正在使用手机。您是否考虑过在循环之外的父组件中使用模态？

你可以有一个数据变量来处理你的模态例如

modal: {
    open: false,
    schedule: null }

基本上，当你的按钮被点击时，你可以添加一个v-click，它带有一个控制这个数据的函数，它反过来处理模态中的内容。

然后在您的日期选择器或模式上有一个功能来处理更新/关闭以清除此数据并处理您在外面需要的任何内容。

然后你可以把它组合成一个组件。

我看到你有 vuex，你也可以使用 vuex 来控制你的模态和它的内容。

【讨论】：