Блог

Я работаю над ABM обслуживания клиентов. Для поиска пользователей я использую Vue Select для фильтрации и выбора правильного клиента… Vue выберите получить список клиентов из моего API клиентов, затем я извлекаю данные в vue select. Пользователь может фильтровать, чтобы получить правильного клиента…

Что мне нужно знать, так это как назначить выбранного клиента, когда я хочу «отредактировать» службу. Когда пользователь нажимает «Редактировать сервис», модальный режим открывается в режиме редактирования, он вызывает API-интерфейс «/ service / {id}», чтобы получить служебную информацию. Ответ службы со всей служебной информацией и идентификатором клиента … проблема в том, что если я укажу его как выбранный по умолчанию…

Вот моя информация о vuejs:

Моя функция searchCustomers для извлечения данных в «параметры»:

 searchCustomers(search){

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

            axios.get('api/customer?nomina=amp;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>
 

Каков был бы правильный способ передать идентификатор и назначить правильного клиента v-form?

Что-то вроде этого должно сработать. Здесь показано, как вы можете присвоить выбранное значение полям формы. Для входных данных хитрость заключается v-model в их использовании .. Примеры приведены ниже.

Редактировать: обновил мой ответ для использования slots ..

Помогает ли это ответить на ваш вопрос, или я неправильно понимаю?

На вашем месте я бы обновил их документацию — это чрезвычайно полезно!

[Зеркало CodePen]

 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>