设置初始vuetify v选择值

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

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

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

Answer 1

我相信您的设置存在两个问题。首先，初始值应为optionsin中的一个select，即，您应该people包含您的defaultSelected;；其次，您的对象需要包含一个value字段，请参阅v-select道具。否则，您需要指定item-valueprop；在这里查看工作示例。

<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"
      }
    ]
  }
});

Answer 2

那些从搜索中发现这个问题的人的替代答案......

如何使用对象的属性选择默认值

<template>

   <v-select v-model="input.user_id" :items="users" item-value="id" item-text="name" label="Users"/>

</template>

<script>
  export default {
    data: () => ({
        input: {
            user_id: 2,
        },
        users: [
          {
            id: 1,
            name: "John",
            last: "Doe"
          },
          {
            id: 2,
            name: "Harry",
            last: "Potter"
          },
          {
            id: 3,
            name: "George",
            last: "Bush"
          }
        ]
    }),
  }
</script>

小提琴示例： https : //jsfiddle.net/4c3tbj6m/

解释用法：

v-model是一个字段value属性的特殊接口方法<input />。

item-value="id"告诉input字段attribute选定object项目行set的value内容input.user_id

item-text="name"告诉字段attribute使用所选object项目行的哪些内容显示为所选文本。

请参见官方文档上v-model。

上面的示例是一个select字段，因此v-model表示元素的selected属性值，option如下所示：

<option value="1" selected>John</option>

的值为input.user_id选中项（由v-model绑定设置的值）

然后您可以发布整个input（如果添加了更多输入字段），但在这种情况下，只有user_id在那里：

<template>

   <v-select v-model="input.user_id" :items="users" item-value="id" item-text="name" label="Users"/>

</template>

<script>
  export default {
    data: () => ({
        input: {
            user_id: 2,
        },
        users: [
          {
            id: 1,
            name: "John",
            last: "Doe"
          },
          {
            id: 2,
            name: "Harry",
            last: "Potter"
          },
          {
            id: 3,
            name: "George",
            last: "Bush"
          }
        ]
    }),
  }
</script>

<v-btn @click.prevent="save">SAVE</v-btn>

这将POST是JSON您的服务器端点的对象，/my/api/example格式如下：

{
  "user_id": 1
}