선택한 Vue 옵션 선택

선택한 Vue 옵션 선택

고객 서비스 ABM에서 일하고 있습니다.사용자 검색을 위해 Vue Select를 사용하여 올바른 고객을 필터링하고 선택합니다.Vue Select는 고객 API에서 고객 목록을 가져온 다음 데이터를 vue select로 가져옵니다.사용자는 올바른 고객을 얻기 위해 필터링할 수 있습니다.

서비스를 "편집"할 때 선택한 클라이언트를 할당하는 방법을 알아야 합니다.사용자가 "서비스 편집"을 누르면 편집 모드에서 열린 모달은 "/service/{id}"로 API 호출하여 서비스 정보를 가져옵니다.서비스 응답과 모든 서비스 정보 및 고객 ID...문제는 defaul selected로 하면...

다음은 나의 vuejs 정보입니다.

My searchCustomers 함수는 데이터를 "옵션"으로 가져옵니다.

searchCustomers(search){

            let searchVal = search.split(' ').join('+');

            axios.get('api/customer?nomina=&filter=' + searchVal)
            .then((response) => {
              this.options = response.data['data'];
            })
            .catch(function (error) {
              console.log(error);
            })
          },

api에서 데이터를 가져오려면 새 서비스 모달:

newEditServiceModal(id){

            this.editMode = true;

            this.$Progress.start();

            this.service.clear();
            this.service.reset();

            axios.get('api/service/' + id)
            .then((data) => {
              this.service.fill(data.data)
            })
            .catch(() => {
              this.$Progress.fail();
            })

            $('#serviceModal').modal('show');

          },

마지막으로 v-select 구성 요소:

<v-select 
  :options="options" 
  @search="searchCustomers" 
  :filterable="false" 
  v-model="service.id_customers" 
  :class="{ 'is-invalid': service.errors.has('customer.id') }"
>
  <template 
    slot="no-options"
  >
    Buscar un cliente...
  </template>

  <template 
    slot="option" 
    slot-scope="option"
  >
    <div class="d-center">
    {{ option.id + ' - ' + option.name }}
    </div>
  </template>

  <template 
    slot="selected-option" 
    slot-scope="option" 
    :value="option.id" 
    v-model="service.id_customers"
  >
    <div class="selected d-center">
      {{ option.id + ' - ' + option.name }}
    </div>
  </template>
</v-select>

ID를 전달하고 올바른 고객을 v-form에 할당하는 올바른 방법은 무엇입니까?

이런 게 효과가 있을 거야선택한 값을 양식 필드에 할당하는 방법을 보여 줍니다.입력의 경우 트릭은v-model그 위에...다음은 예를 제시하겠습니다.

---

편집: 사용하기 위해 내 답변을 업데이트했습니다.slots..

---

이게 질문에 대한 답변에 도움이 되나요? 아니면 제가 오해하고 있는 건가요?

내가 당신이라면 그들의 문서를 다시 읽었을 텐데, 그것은 매우 도움이 됩니다!

---

[코드펜 거울]

---

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: "#app",
  data: {
    selected: "",
    options: [{
      id: 1,
      name: "Guido Caffa"
    }, {
      id: 2,
      name: "John Doe"
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<div id="app">
  <div>
    <v-select v-model="selected" :options="options">
      <template v-slot:option="option">
        {{ option.id }} - {{ option.name }}  
      </template>
      <template v-slot:selected-option="option">
        {{ option.id }} - {{ option.name }}
      </template>
    </v-select>
    <div v-if="selected !== ''" style="margin-top: 20px;">
      <hr/> Selected Item:
      <pre>{{ selected }}</pre>
      <hr/>
    </div>
    <div v-if="selected !== ''" style="margin-top:20px;">
      Name:
      <div>
        <input type="text" v-model="selected.name" />
      </div>
      ID:
      <div>
        <input type="text" v-model="selected.id" />
      </div>
      <hr/>
    </div>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/55763699/vue-select-selected-option