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

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

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

原文由 John Grayson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Psidom 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 是 <input /> 字段的 value 属性的特殊接口方法。

item-value="id" tells the input field what attribute of a selected object item row to set as the value 的 input.user_id

item-text="name" 告诉字段什么 attribute 已选择的 object 项目行用于显示为 所选文本。

请参阅 v-model 上的 官方文档。

Example above is a select field so v-model is representing value of what would be a selected attribute of an option element like the following:

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

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

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

methods: {

  save() {

    axios.post('/my/api/example', this.input).then(response => {

      console.log(response);

    })

  }

}

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

这将 POST 一个 JSON 反对您的服务器端点 /my/api/example 格式如下：

 {
  "user_id": 1
}

原文由 Marc 发布，翻译遵循 CC BY-SA 4.0 许可协议