Question

在以下单个文件模板中，我正在从后端加载用户汽车，将其存储在存储模块的状态内，然后在此组件中使用结果来构建表。

动作是异步的，因此每次使用汽车清单时，我都使用watch（）来重新渲染表。

问题：该表的初始化是通过Javascript代码完成的，第二列显示2个按钮。当用户单击其中一个按钮时，我想做一些事情：但是@click或在这里无法识别，因为它们是在安装组件后添加的。

如何强制重新渲染组件？

<template>
    <div class="col-xl-8">
        <div class="kt-datatable" id="cars_datatable"></div>
    </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
    created: function() {
        this.getUserCars();
    },
    computed: {
        ...mapGetters(["userCars"])
    },
    methods: {
        ...mapActions(["getUserCars"])
    },
    watch: {
        userSites: function() {
            const options = {
                data: {
                    type: "local",
                    source: this.userCars,
                    pageSize: 5
                },
                layout: {
                    theme: "default",
                    class: "",
                    scroll: !1,
                    footer: !1
                },
                sortable: !0,
                pagination: !0,
                columns: [
                    {
                        field: "name",
                        title: "Name"
                    },
                    {
                        field: "Actions",
                        title: "Actions",
                        sortable: false,
                        width: 110,
                        overflow: "visible",
                        autoHide: false,
                        template: function() {
                            return '\
                                <a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit details">\
                                    <i class="la la-edit"></i>\
                                </a>\
                                <a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete">\
                                    <i class="la la-trash"></i>\
                                </a>\
                            ';
                        }
                    }
                ]
            };
            $("#cars_datatable").KTDatatable(options);
        }
    }
};
</script>

<style></style>

Answer 1

我看到您已经在使用JQuery，所以最简单的解决方案是使用动态jQuery.fn.on方式注册事件处理程序。该处理程序将识别您动态添加的元素。 Read more here

VueJS：如何在修改dom后强制重新编译<template>

1 个答案: