javascript - VueJS : How to force recompile of <template> after modifying dom

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