VUE-選択するIPアドレス

Question

に基づいてオプションを選択して、私はこれでhttps://github.com/sagalbot/vue-select

に問題がこのプラグインを使用しようとしていますがv-モデルが本当に苦痛であるネイティブの選択とは異なり、オブジェクト全体を与えています。

著者がそれのために計算されたプロパティを使用するように提案し、ここで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を使用していることを確認してください。なぜなら、そのバージョンが追加されたバージョンがわからないからです。だからあなたのexample.Youを参照して、あなたのコードにこれを追加します。

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>

注意を追加あなたが渡したオプション、この場合はv-modelとしての引数val。あなたのケースでは、それはIPアドレスになります。あなたがする必要があるのは、好きなようにオプションをフィルタリングして名前を返すことだけです。