javascript - vue-select 根据ip地址选择选项

Question

我正在尝试使用这个插件https://github.com/sagalbot/vue-select

问题是 v-model 提供了整个对象，这与 native 选择不同，这确实很痛苦。

已确认该插件不支持此处概述的选项 https://github.com/sagalbot/vue-select/issues/122

作者建议使用计算属性。这是演示:http://jsbin.com/wedalog/8/edit?html,js,output

这是代码:

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

new Vue({
  el: '#app',
  data: {
    selected: null,
    options: [
    {
      "id": 1,
      "first_name": "Timothy Chavez",
      "ip_address": "20.153.187.10"
    },
    {
      "id": 2,
      "first_name": "Harold Armstrong",
      "ip_address": "55.156.218.75"
    }, 
    {
      "id": 3,
      "first_name": "Randy Black",
      "ip_address": "79.135.200.161"
    }, 
    {
      "id": 4,
      "first_name": "Joshua Phillips",
      "ip_address": "146.153.135.116"
    }
    ]
  },
  computed: { 
    selectedIp() {
        return this.selected ? this.selected['ip_address'] : null
    }   
  }
});

这是它在 html 中的使用方式:

<v-select v-model="selected" label="first_name" :options="options"></v-select>

它有效，但答案仅在保存时有效。不确定加载时要做什么？例如，我从服务器获取的 IpAddress 是 20.153.187.10 那么我将如何选择适当的选项？

我不知道为什么作者会在这么基本的事情上忽略这一点。

是否有更多的技巧可以使其工作，既可以保存也可以加载？

Answer 1

您将需要使用 getOptoinLabel 并确保您使用的是最新的 vue-select，因为我不确定该 Prop 是在哪个版本上添加的。因此，引用您的示例。您将其添加到您的代码中:

methods: {
   getLabel: function(val){
     if(typeof val === 'object'){
         return val.first_name;
     }else {
     return this.options.filter(function(option){
            return option.ip_address === val;
        })[0].first_name;
     }
   }
}

并在组件实例上添加属性 :get-option-label="getLabel"

<v-select :get-option-label="getLabel" v-model="selected" label="first_name" :options="options"></v-select>

请注意，默认情况下，上述函数将使用参数 val 作为您传递的选项，即本例中的 v-model。因此，在您的情况下，它将是 IP 地址，您所需要做的就是按照您喜欢的方式过滤选项并返回名称。