オプションからjsonデータを取得して、ビューを選択しますか？

Question

私はaxios呼び出しからフェッチされたオプションのリストを表示するには、vue2-selectizeを使用しています：

<template> 
    <selectize v-model="selected" :settings="settings"> 
     <option v-for="option in options" :value="option.id"> 
      ({{ option.author }}) - {{ option.description }} 
     </option> 
    </selectize> 
</template> 

<script> 
    export default { 
     props: ['old-value'], 

     data() { 
      return { 
       selected: this.oldValue, 
       options: [], 
       settings: { 
        preload: true, 
        placeholder: "Search All Authors", 
        dropdownParent: 'body', 
        closeOnSelect: true, 

        render: { 
         option: function (data) { 
          console.log(data); 
          return '<div>' + 
           data.displayName + 
           '<div class="item-bio">' + 
           data.bio + 
           '</div>'; 
         } 
        }, 

        load: async (query, callback) => { 
         axios.get(route('api.showAllAuthors')).then(response => { 
          this.options = response.data; 
          callback(); 
         }) 
        } 
       }, 
      } 
     }, 
    } 
</script> 

問題は、セットアップの選択のための<option>を一度あなただけそれがレンダリング関数に渡す二つの値で動作することができるということです（textおよびvalue）、元のオブジェクトではありません（実際には<option>はこのオブジェクトにアクセスできます）。

このマニュアルでは、というオプションパラメータは<option>タグで使用できますが、<option :data-data="option">に設定しても効果はなく、元のプロパティにはアクセスできません。

<option>がレンダリング機能で使用している元のJSON属性には、どうすればアクセスできますか？

Answer 1

var value = selectizeObject.getValue(), 
    optionJson = selectizeObject.options[value]; 

selectizeObjectは、指定されたselect/inputのオブジェクトです。たとえば、jQueryの場合：

var selectizeObject = $('#my-select')[0].selectize;