主页 / 问题 / 1029670
Accepted
Артём Графский
Asked:2020-09-30 22:36:34 +0000 UTC2020-09-30 22:36:34 +0000 UTC

将索引和数组元素传递给模态窗口VueJS

  • 772

问题是这样的：有服务卡（里面填满了来自后面的请求），还有一个删除按钮（点击它会调用removeSerivce方法）。该方法通过ID删除背面的服务，还使用拼接反应方法移除卡。一切都很好，但是需要创建一个确认窗口（您确定要删除吗？）。我被困在这个问题上，因为我不能在这个窗口内传递数组元素的索引和元素本身！我什么都试过了……告诉我怎么做最简单的方法！谢谢！

我的组件

<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);
                })
        }

    },
vue.js

2 个回答

  1. Best Answer

    通过将我的模式移动到另一个组件并将我的服务和索引传递给它来解决索引传递问题。

    这现在代替了我的按钮和窗口：

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

    我知道解决方案不是很正确，因为每个元素都有自己的模态窗口，但在我的情况下，组件并不多。并且对话框属性（负责调用窗口本身）也存在问题。但它可以很容易地解决。总的来说，我对结果感到满意。但是将来我会解决这个问题（因为我理解 Vue 本身）。

    • 0

  2. 我这样做了，请记住我的应用程序与作者的应用程序不同：

    创建了一个模态窗口组件，我在其中放置了一个子组件

    <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变成了 equal true，之后会显示一个模态窗口，并将上述变量传递给子组件

    一般来说，据我了解，作者做的差不多，只是他给列表的每个元素都赋予了模态窗口组件，但我把模态窗口从列表中取出

    • 0

相关问题