以编程方式设置下拉选项

Question

我需要能够在页面打开时更改 Kendo 下拉组件中的选定选项，而不是仅在页面加载时设置默认值。我已经看到 Kendo 用于 jQuery 的示例，但在 Kendo 中没有用于 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"
            },

更改默认项不起作用（我没想到会这样）。

是否有与 jQuery 相同的 Set 函数？我试过了，但无法正常工作。

Answer 1

在这种情况下使用 v-model

<dropdownlist id="StatusDropdown" :data-items="statusList" :text-field="'text'"
              :value-field="'id'" v-model="selectedStatus"
              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" }
            ],
            selectedStatus: { id: 3, text: "Active" },

以编程方式设置下拉选项

Programmatically set dropdown option

kendo-ui

vue.js

dropdown