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

Question

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

Action 是异步的，所以我使用 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