我正在研究客户服务ABM。为了进行用户搜索,我正在使用Vue Select筛选并选择正确的Customer ... Vue Select从我的客户api获取客户列表,然后将数据提取到vue select中。用户可以进行过滤以获取正确的客户...
我需要知道的是当我要“编辑”服务时如何分配选定的客户端。当用户在编辑模式下按“服务编辑”模式打开时,它将对“ / service / {id}”进行api调用以获取服务信息。具有所有服务信息和客户ID的服务响应...问题在于,如果我将其选择为默认值...
这是我的vuejs信息:
我的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的正确方法是什么?
答案 0 :(得分:0)
类似的事情应该可以解决。这显示了如何将所选值分配到表单字段中。对于输入,技巧是在它们上使用this.state.members[activeMemberId].id || null
。下面是示例。
编辑: :我更新了答案,以便使用v-model
。
这是否有助于回答您的问题,还是我误会了?
如果我是我,我会重读their documentation-这非常有帮助!
slots
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: "#app",
data: {
selected: "",
options: [{
id: 1,
name: "Guido Caffa"
}, {
id: 2,
name: "John Doe"
}]
}
})