Vue选择选定的选项

时间:2019-04-19 14:49:58

标签: vue.js vuejs2 vue-component vue-select

我正在研究客户服务ABM。为了进行用户搜索,我正在使用Vue Select筛选并选择正确的Customer ... Vue Select从我的客户api获取客户列表,然后将数据提取到vue select中。用户可以进行过滤以获取正确的客户...

enter image description here

enter image description here

我需要知道的是当我要“编辑”服务时如何分配选定的客户端。当用户在编辑模式下按“服务编辑”模式打开时,它将对“ / service / {id}”进行api调用以获取服务信息。具有所有服务信息和客户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>

传递id并将正确的客户分配给v-form的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

类似的事情应该可以解决。这显示了如何将所选值分配到表单字段中。对于输入,技巧是在它们上使用this.state.members[activeMemberId].id || null 。下面是示例。


编辑: :我更新了答案,以便使用v-model


这是否有助于回答您的问题,还是我误会了?

如果我是我,我会重读their documentation-这非常有帮助!


[CodePen mirror]


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

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