设置初始vuetify v-select值 [英] Set initial vuetify v-select value

问题描述

有人可以帮我设置 v-select 的默认值吗？需要注意的是我的 v-select 是用对象填充的，我认为可能是为什么分配我的 item-value 到我想要的初始值不起作用：

Can someone help me set the default value for a v-select? The caveat is that my v-select is populated with objects, which I think might be the reason why assigning my item-value to my desired initial value isn't working:

<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 为空。这里有一个小提琴供参考：

The initial v-select is blank. Here's a fiddle for reference:

https：// jsfiddle.net/tgpfhn8m/734/

有人可以帮忙吗？提前致谢！

Can someone help? Thanks in advance!

推荐答案

我相信您的设置存在两个问题。首先，初始值应该是选择中的选项之一，即你应该人包括 defaultSelected ;其次 您的对象需要包含值字段 ，请参阅 v-select props 。否则你需要指定 item-value prop;请参阅此处的工作示例。

I believe there are two issues with your set up. Firstly, the initial value should be one of the options in select, i.e., you should have people include your defaultSelected; Secondly your object needs to contain a value field, see v-select props. Otherwise you need to specify item-value prop; See a working example 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"
      }
    ]
  }
});

这篇关于设置初始vuetify v-select值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！