VueJS: Как принудительно перекомпилировать <template>после модификации 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 способ регистрации обработчика событий.Этот обработчик распознает элементы, которые вы добавляете динамически. Подробнее здесь