设置初始 vuetify v-select 值

Posted 2023-02-16

【中文标题】设置初始 vuetify v-select 值

【英文标题】：Set initial vuetify v-select value

【发布时间】：2018-12-25 19:47:55

【问题描述】：

有人可以帮我设置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/

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

【参考方案1】：

我认为您的设置存在两个问题。首先，初始值应该是select 中的options 之一，即你应该让people 包含你的defaultSelected；其次您的对象需要包含value 字段，请参阅v-select props。否则需要指定item-value prop；查看工作示例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"
      
    ]
  
);

【讨论】：

注意：数组必须是对象或字符串原语，如数字将不起作用。

【参考方案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" 告诉input 字段将选定object 项目行的attribute 告诉set 作为input.user_id 的value

item-text="name" 告诉字段选择的object 项目行中的哪个attribute 用于显示为选定的文本。

在v-model 上查看Official Documentation。

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

<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

【讨论】：

v-model="input.user_id" 是什么意思？

@armnotstrong 用其他信息更新了我的答案。

【参考方案3】：

只需添加 selected:true

items: [
    
      text: "Name",
      value: "name",
      selected: true,
    ,
    
      text: "Identifier",
      value: "id",
    ,
    
      text: "Episode",
      value: "ep",
    ,
  ],

【参考方案4】：

对于任何偶然发现这一点并需要 vue 3 组合 API 打字稿解决方案来选择对象的人：

<template>
            <select v-model="state.selectedShape">
                <option
                    v-for="(shape) in state.shapes"
                    :key="shape.id"
                    :value="shape">
                     shape.description 
                </option>
            </select>
</template>


<script>
         setup () 
            const state = reactive(
                selectedShape: new Shape(),
                shapes: Array<Shape>(),
            );
         
</script>

像这样，您可以平等地更新形状对象和数组，所有这些都将是反应性的。

为了获得初始值，我这样做是因为我还从 api 插入其他值，但我确信有更好的方法：

        state.shapes.push(new Shape());

无论哪种方式，我都这样做是因为我不想要空值，而不是new Shape()，我实际上使用了一个具有“全部”描述的默认形状，因此当我选择它时，我有一个带有没有实际数据，id 为 0。