javascript - 设置初始 vuetify v-select 值

Question

谁能帮我设置一个v-select的默认值？需要注意的是，我的 v-select 填充了对象，我认为这可能是为什么将我的 item-value 分配给我想要的初始值不起作用的原因:

<v-select
  item-text="name"
  v-model="defaultSelected"
  :items="people"
>

Vue.use(Vuetify);

const vm = new Vue({
  el: "#app",
  data: {
    defaultSelected: {
      name: "John",
      last: "Doe"
    },
    people: [
      {
        name: "Harry",
        last: "Potter"
      },
      {
        name: "George",
        last: "Bush"
      }
    ]
  }
});

预期:

初始v-select应该是John

实际:

初始的 v-select 是空白的。这是一个 fiddle 供引用:

https://jsfiddle.net/tgpfhn8m/734/

我怎样才能得到我期望的行为？

Answer 1

我认为您的设置存在两个问题。首先，初始值应该是 select 中的 options 之一，即你应该让 people 包括你的 defaultSelected;其次，您的对象需要包含一个value 字段，参见v-select props .否则你需要指定 item-value 属性；查看工作示例 here .

<v-select
  item-text="name"
  item-value="last"
  v-model="defaultSelected"
  :items="people"
>

Vue.use(Vuetify);

 const vm = new Vue({
  el: "#app",
  data: {
    defaultSelected: {
      name: "John",
      last: "Doe"
    },
    people: [
      {
        name: "John",
        last: "Doe"
      },
      {
        name: "Harry",
        last: "Potter"
      },
      {
        name: "George",
        last: "Bush"
      }
    ]
  }
});