VueAdminTable - make props reactive

[Anubarak]

I created an enhanced version of your VueAdminTable with more functions and I required to update props on the fly from outside (basically an ElementIndexTable just for normal models/records and no elements). I thought it might be useful for others to be able to change the settings after creation as well so I'll share my way to achieve that in case someone needs it.

for example

const adminTable = new Craft.VueAdminTable({
    searchPlaceholder: Craft.t('app', 'Search')
});

// .... 
// this won't change the property
adminTable.settings.searchPlaceholder = Craft.t('app', 'Search Something');

So I made my props reactive

Craft.VueAdminTable = Garnish.Base.extend(
  {
        // add the component
        vueTable: null,
        // add reactive props
        props: null,
        init: function (settings) {
            this.setSettings(settings, Craft.VueAdminTable.defaults);

            // set this.props as a reactive value
            this.props = ref(this.settings);

            this.vueTable = new Vue({
                components: {
                    AdminTable,
                },
                data() {
                    return {};
                },
                render: (h) => {
                    return h(AdminTable, {
                        // instead of props we now use this.props.value -> our reactive object
                        props: this.props.value,
                    });
                },
            }).$mount(this.settings.container);

            return this.vueTable;
        },
        // added a function to change the props
        updateSetting(key, value){
            this.props.value[key] = value;
        }
        // ....
}

This will allow us to modify settings

const adminTable = new Craft.VueAdminTable({
    searchPlaceholder: Craft.t('app', 'Search')
});
// now the value will change
adminTable.updateValue('searchPlaceholder',  Craft.t('app', 'Search Something'));

[brandonkelly]

This has been added for Craft 4.5 (via #13558) 🎉

[brandonkelly]

Craft 4.5.0 is out with that change.