I'm working on a Customer Service ABM. For user search, i'm using Vue Select to filter and select the correct Customer... Vue Select get the customers list from my customers api, then i fetch data into vue select. THe user can filter to get the correct customer...
What I need to know is how to assign the selected client when I want to "edit" a service. When a user press on "Service Edit" the modal open in edit mode, it's make an api call to "/service/{id}" to get Service information. The service response with all the service information, and with the customer ID... the problem is that if I put it as defaul selected ...
Here is my vuejs information:
My searchCustomers function, to fetch data into "options":
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);
})
},
new service modal, to get data from 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');
},
And finally my v-select component:
<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>
What would be the correct way to pass the id, and assign the correct customer to v-form?