vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Dispatch event in directive #498

Closed rodwin closed 8 years ago

rodwin commented 8 years ago

I would like to dispatch an event when a method inside a directive is triggered so that a parent component where the directive resides can implement their own logic.

Vue.directive('hs-patient-search-grid', {
    params: ["patients"],

    paramWatchers: {

        patients: function (val, oldVal) {

            var grid = $(this.el).ejGrid("instance");

            var dm = ej.DataManager({
                json: ej.parseJSON(val)
            });

            grid.dataSource(dm);
        }
    },

    bind: function () {

        $(this.el).ejGrid({
            dataSource: this.params.patients,
            allowPaging: true,
            columns: [
                { field: "AcctNo", headerText: "Account #" },
                { field: "FirstName", headerText: 'First Name' },
                { field: "LastName", headerText: 'Last Name' },
                { field: "DOB", headerText: 'DOB' },
                { field: "CellPhone", headerText: 'Phone' },
                {
                    headerText: "",
                    commands: [
                        {
                            type: "wizard",
                            buttonOptions: {
                                contentType: "imageonly",
                                prefixIcon: "fa fa-magic"

                            }
                        },
                        {
                            type: "futureAppts",
                            buttonOptions: {
                                text: "Future Appts",
                                width: "80"
                            }
                        },
                        {
                            type: "select",
                            buttonOptions: {
                                text: "Select",
                                width: "50",
                                click: this.select.bind(this)
                            }
                        }
                    ],
                    isUnbound: true,
                    textAlign: ej.TextAlign.Left,
                    width: 150
                }
            ],
            allowSorting: true,
            allowResizeToFit: true
        });

    },

    select: function(args) {

        var grid = $(this.el).ejGrid("instance");
        var index = $('button#' + args.e.currentTarget.id + '.' + args.e.currentTarget.className.toString().split(' ').join('.')).closest("tr").index();
        var record = grid.getCurrentViewData()[index];

        this.$dispatch('select', record);

    }

});

and i am getting this error main.js:352 Uncaught TypeError: this.$dispatch is not a function

Can I dispatch an event using directive in vuejs?

Thanks

rodwin commented 8 years ago

I just learned that I can use the parent method by calling this.vm.(function name)