초기 v-선택 값 설정

초기 v-선택 값 설정

누군가 에 대한 기본값을 설정하는 것을 도와줄 수 있는가?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/

누가 좀 도와줄래?미리 고마워!

나는 너의 계획에 두 가지 문제가 있다고 믿는다.첫째, 초기 값은 다음 중 하나여야 한다.options에select, 즉, 당신은 했어야 했다.people너의 것을 포함하다defaultSelected둘째, 객체에 필드가 있어야 하며, 소품을 참조하십시오.그렇지 않으면 지정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"
      }
    ]
  }
});

검색에서 이 질문을 찾은 사람에 대한 대체 답변...

개체의 속성을 사용하여 기본값을 선택하는 방법

<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에 대한 특별한 인터페이스 방법value의 속성<input />밭을 갈다

item-value="id"에게 말하다input무엇을 들춰내다.attribute선발된object로의 항목 행.set처럼value의input.user_id

item-text="name"현장에 무엇을 알리다.attribute선발된object선택한 텍스트로 표시하는 데 사용할 항목 행.

다음에 대한 공식 문서 참조v-model.

위의 예는 a이다.select그렇게 하다v-model어떤 것이 될 것인가의 가치를 나타내는 것이다.selected의 속성option다음과 같은 요소:

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

의 가치input.user_id선택한 항목임(값:v-model바인딩하다)

그러면 전체 POST를 할 수 있다.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 a JSON서버 엔드포인트에 대한 오브젝트/my/api/example다음과 같이 포맷됨:

{
  "user_id": 1
}

이 문제를 우연히 발견하여 객체를 선택할 수 있는 vue 3 composition api typecript 솔루션이 필요한 모든 사용자:

<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());

어느 쪽이든, 나는 null 값을 원하지 않기 때문에, 그리고 대신에 이 모든 것을 했다.new Shape()나는 실제로 "All"이라는 설명이 있는 기본 도형을 사용하며, 이를 선택하면 실제 데이터가 없고 ID가 0인 도형이 있다.

선택 항목 추가:참

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

참조URL: https://stackoverflow.com/questions/51392719/set-initial-vuetify-v-select-value