2017-09-06 99 views
0

我使用vue2-selectize顯示從Axios公司電話獲取選項列表:Vue selectize,從選項獲取json數據?

<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>的選擇,你只能用這兩個值的工作把它傳遞給渲染功能(textvalue)而不是原始對象(而實際的<option>可以訪問此對象)。

手冊中提到可選參數dataAttr可用於<option>標籤,但設置<option :data-data="option">沒有效果,我仍然無法訪問原始屬性。

如何訪問<option>在渲染函數中使用的原始JSON屬性?

回答

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

selectizeObject是給定選擇/輸入的對象。例如jQuery:

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