vue-select 根据ipaddress选择选项

Question

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

这个问题是 v-model 提供了整个对象，这与原生选择不同，这真的很痛苦。

已确认该插件不支持此处列出的选项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，因为我不确定该道具是在哪个版本上添加的。所以参考你的例子。你将把它添加到你的代码中：

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 地址，然后您需要做的就是按照您喜欢的方式过滤您的选项并返回名称。