設置初始 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/

我怎樣才能得到我期望的行為？

Answer 1

我相信你的設置有兩個問題。 首先，初始值應該是select中的options之一，即你應該讓people包括你的defaultSelected ； 其次，您的對象需要包含一個value字段，請參閱v-select props 。 否則需要指定item-value屬性； 在此處查看一個工作示例。

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

item-value="id"告訴input字段將選定object項目行的哪個attribute set為input.user_id的value

item-text="name"告訴字段使用選定object項行的哪個attribute來顯示為選定文本。

請參閱有關v-model官方文檔。

上面的示例是一個select字段，因此v-model表示option元素的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
}

Answer 3

對於任何偶然發現這一點並需要一個 vue 3 composition api typescript 解決方案來選擇對象的人：

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

Answer 4

對於v-select你應該根據官方文檔使用item-title ， item-value和item-disabled屬性。

<template>
    <section>
        <div>
            <label for="polls">Choose a poll:</label>
            <div>
                <v-select v-model="selected" :items="body" item-title="name" item-value="last" />
            </div>
            <table-poll :selections="selections"></table-poll>
        </div>
    </section>
</template>
<script>
  data: {
    selected: '',
    body: [
      {
        name: "Bob",
        last: "One"
      },
      {
        name: "Tom",
        last: "Dylan"
      },
      {
        name: "Mark",
        last: "Wen"
      }
    ]
  }

</script>

Answer 5

只需添加 selected:true

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