vue.jswebix

Webix as Vue call method


How can I call the method storeNewOrder in event onAfterDrop from the Webix part?

this.$emit.storeNewOrder() and storeNewOrder() doesn't work

   export default {
        template:"<div></div>",

        props:
            ['url'],

        computed: mapGetters({

        }),

        mounted:function(){
            this.webixId = webix.ui({
                container: this.$el,
                $scope: this,
                view:"treetable",
                height: 600,
                id: 'project',

                headermenu: true,
                resizeColumn: true,
                select: "row",
                dragColumn:true,
                headerRowHeight:40,
                drag:true,
                columns: [
                    {id: "order_column",header:"Id",  width: 50, sort: "int"},
                    {id: "value", header:"Bezeichnung",fillspace: true, minWidth: 200,  sort: "string", template:"{common.treetable()} #value#" },
                    {id:"created_at", map:"(date)#created_at#", header:["Erstellt am", { content:"dateRangeFilter"}],  adjust: true },
                ],
                on: {
                    onSelectChange: function(){
                        store.commit('setSelectedPart', this.getItem(this.getSelectedId(true)))
                    },
                    onItemDblClick: function () {
                        store.commit('setPartView', 'detail')
                    },
                    onAfterLoad: function () {

                        if (selectedRowId) {
                            this.select(selectedRowId)
                            this.showItem(selectedRowId)
                        }
                    },
                    onAfterDrop: function(context, native_event){
                        storeNewOrder() //how to call the method storeNewOrder?
                    }

                },
                url: this.url
            })
        },

        methods: {
            storeNewOrder: function() {
                //store new order
            }
        },
        destroyed:function(){
            webix.$$(this.webixId).destructor();
        }
    }

Solution

  • You should call it with this.storeNewOrder() but I suspect it may be out of scope.

    So at the top of the mounted function do:

    const self = this;
    
    this.webixId = webix.ui({
    ...
    
    

    And then call it with self.storeNewOrder()

    Try both ways.