Programmatically set dropdown option

Question

I need to be able to change the selected option in a Kendo dropdown component, while the page is open rather than just setting the default when the page loads. I've seen examples with Kendo for jQuery but not in Kendo for Vue.

<dropdownlist id="StatusDropdown" :data-items="statusList" :text-field="'text'"
              :value-field="'id'" :default-item="defaultStatus"
              class="form-control" @change="statusChanged"></dropdownlist>

...

export default {
    name: "Whatever",
    data() {
        return {
            statusList: [
                { id: 0, text: "All Status" },
                { id: 3, text: "Active" },
                { id: 25, text: "Another status" }
            ],
            defaultStatus: {
                text: "Default status"
            },

Changing the default item doesn't work (I didn't expect it to).

Is there an equivalent of the Set function like there is with jQuery? I tried this but can't get it to work.

Answer 1

Use v-model in this case

<dropdownlist id="StatusDropdown" :data-items="statusList" :text-field="'text'"
              :value-field="'id'" v-model="selectedStatus"
              class="form-control" @change="statusChanged"></dropdownlist>

and in your script

export default {
    name: "Whatever",
    data() {
        return {
            statusList: [
                { id: 0, text: "All Status" },
                { id: 3, text: "Active" },
                { id: 25, text: "Another status" }
            ],
            selectedStatus: { id: 3, text: "Active" },