kendo-vue 的下拉列表，如何设置默认值

Question

我正在使用对象数组来填充 vue kendo 下拉列表控件。

 <kendo-dropdownlist
    :data-source="months"
    :data-text-field="'abbrev'"
    :data-value-field="'value'"
    v-model="internal.selectedMonth"
  ></kendo-dropdownlist>

我的数组如下所示：

 months: [
        {
          text: "January",
          abbrev:"Jan",
          value: 1,
          numDays: 31
        },
        {
          text: "February",
          abbrev:"Feb",
          value: 2,
          numDays: 28
        },
        {
          text: "March",
          abbrev:"Mar",
          value: 3,
          numDays: 31
        },
        {
          text: "April",
          abbrev:"Apr",
          value: 4,
          numDays: 30
        },
        {
          text: "May",
          abbrev:"May",
          value: 5,
          numDays: 31
        },
        {
          text: "June",
          abbrev:"Jun",
          value: 6,
          numDays: 30
        },
        {
          text: "July",
          abbrev:"Jul",
          value: 7,
          numDays: 31
        },
        {
          text: "August",
          abbrev:"Aug",
          value: 8,
          numDays: 31
        },
        {
          text: "September",
          abbrev:"Sep",
          value: 9,
          numDays: 30
        },
        {
          text: "October",
          abbrev:"Oct",
          value: 10,
          numDays: 31
        },
        {
          text: "November",
          abbrev:"Nov",
          value: 11,
          numDays: 30
        },
        {
          text: "December",
          abbrev:"Dec",
          value: 12,
          numDays: 31
        }
      ]

当页面加载时，我的模型设置为空，但在控件中选择了值 "January"。 Vue 开发者工具显示模型尚未设置，因此 UI 与模型不同步。

如何让它在用户选择实际值（或模型加载到其他地方）之前不显示任何内容？

Answer 1

只需在数组的开头添加一个值为 null 的空选项

{ text: "", abbrev:"", value: null, numDays: null }

kendo-vue 的下拉列表，如何设置默认值

kendo-dropdownlist for vue, How to set default value

kendo-ui

vue.js