Vue Выберите выбранный вариант - PullRequest
Новая
       35

Vue Выберите выбранный вариант

2 голосов
/ 19 апреля 2019

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

enter image description here

enter image description here

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

enter image description here

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

enter image description here

Моя функция 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>

Как правильно передать идентификатор и назначить правильного клиента для v-формы?

1 Ответ

1 голос
/ 19 апреля 2019

Нечто подобное должно сработать.Это показывает, как вы можете назначить выбранное значение в полях формы.Для входов трюк использует 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"
    }]
  }
})





  
    
      
        {{ option.id }} - {{ option.name }}  
      
      
        {{ option.id }} - {{ option.name }}
      
    
    
       Selected Item:
      {{ selected }}
Имя:
ID:
...