vue.js 设置初始验证选择值

lzfw57am  于 2022-12-27  发布在  Vue.js
关注(0)|答案(4)|浏览(155)

有人能帮我设置一个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/
我怎样才能得到我所期望的行为?

js81xvg6

js81xvg61#

我认为您的设置存在两个问题:第一,初始值应该是select中的options之一,即您应该让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"
      }
    ]
  }
});
t98cgbkg

t98cgbkg2#

通过搜索找到此问题的人的替代答案...

    • 如何使用对象的属性选择默认值**
<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-model是用于<input />字段的value属性的特殊接口方法。
item-value="id"告诉input字段将所选object项行的attribute作为input.user_idvalue发送到set
item-text="name"告诉字段要使用选定object项行的哪个attribute显示为选定文本
请参见v-model上的Official Documentation
上面的示例是select字段,因此v-model表示option元素的selected属性的值,如下所示:
<option value="1" selected>John</option>
input.user_id的值是选定项(由v-model绑定设置的值)
然后可以POST整个input(如果添加了更多输入字段),但在本例中只有user_id
x一个一个一个一个x一个一个二个x
这将POST一个JSON对象到您的服务器端点/my/api/example,格式如下:

{
  "user_id": 1
}
eimct9ow

eimct9ow3#

对于那些偶然发现这一点并需要一个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(),我实际上使用了一个默认的形状,其描述为“All”,所以当我选择它时,我有一个没有实际数据和id为0的形状。

vaqhlq81

vaqhlq814#

仅添加选定项:真

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

相关问题