How to detect change in vue treeselect

Question

I am using vue treeselect to select multiple week days from a dropdown list. It works well but I want to run a piece of code when a change is made. I have read the documentation but don't understand how to use an event. Think I may need the select event. Any help is appreciated!

HTML:

<treeselect :multiple="true"
        :options="options"
        :openOnClick="true"
        :clearable="false"
        :beforeClearAll="false"
        :allowClearingDisabled="true"
        :select="dayChange()" //I know this doesn't work!
        v-model="days" /> <treeselect-value :value="days" />

JS:

vm = new Vue({
        el: ".my-app",
        data: {
            ...,
            options: [
                { id: 1, label: "Monday" },
                { id: 2, label: "Tuesday" },
                { id: 3, label: "Wednesday" },
                { id: 4, label: "Thursday" },
                { id: 5, label: "Friday" },
                { id: 6, label: "Saturday" },
                { id: 7, label: "Sunday" }
            ],
            ...
        },

        methods: {
            dayChange: function () {
                alert("changed");
            },
        }
})

Boussadjra Brahim · Accepted Answer · 2020-07-21T20:01:20.433

1

You're misusing the event, you shouldn't bind the event to its handler as follows :

@select="dayChange"

or

v-on:select="dayChange"

the : binding sign is used for props not events

in your method you should have :

   methods: {
            dayChange: function (node, instanceId) {
                alert("changed");
            },
        }

edited Jul 21 '20 at 20:01

answered Jul 21 '20 at 16:11

Boussadjra Brahim

82,684
19
144
164

Thanks for your response. I understand that this doesn't work. But my question is... how do I trigger the dayChange() function when a day is selected / deselected. The docs say to ```select (node, instanceId) Emitted after selecting an option.``` But how do I use this? – Mush Jul 21 '20 at 18:36
you should pass them as parameters, please check my edited answer – Boussadjra Brahim Jul 21 '20 at 20:02
Ok. Thanks for that. I now understand how it works... I need ```v-on:select="dayChange"``` OR ```v-on:deselect="dayChange"``` OR ```v-on:input="dayChange"``` (for any change to the input) and the node and instanceId are passed to the method. Thanks Boussadjra! – Mush Jul 22 '20 at 10:37

How to detect change in vue treeselect

1 Answers1