Vue select에서 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> 태그에 사용 가능한 dataAttr의 선택적 매개 변수를 언급하지만, <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;