设置初始vuetify v选择值

时间:2018-07-18 02:29:24

标签: javascript vue.js vuetify.js

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

有人可以帮忙吗?预先感谢!

4 个答案:

答案 0 :(得分:10)

我相信您的设置存在两个问题。首先,初始值应为options中的select之一,即,您应该让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"
      }
    ]
  }
});

答案 1 :(得分:0)

从搜索中找到此问题的人的替代答案...

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

<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/

答案 2 :(得分:0)

对于任何偶然发现并需要 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() 我实际上使用了一个具有描述“All”的默认形状,因此当我选择它时,我有一个没有实际数据且 id 为 0 的形状。

答案 3 :(得分:-1)

只需添加 selected:true

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