如何使用v-select获取值,使用插槽模板从ajax加载选项

我试图在我的vue组件中更新所选的值,但它不会改变,而是保持为空,我可以选择一些东西,但我不能用它做任何事情。

我试着添加 :value 到 v-select 组件,但每当我选择某个内容时,它都不会更新值。

由于我仍在使用他们文档中的示例来尝试这一点,我在codepen上做了一个叉子: https://codepen.io/andyftp/pen/GweKpP 所以你可以试试。

有人能帮我吗?

HTML:

<div id="app">
  <h1>Vue Select - Ajax</h1>
  <v-select label="name" 
            :filterable="false" 
            :options="options" 
            :selected="selected"
            @search="onSearch"
     ><template slot="no-options">
      type to search GitHub repositories..
    </template>
    <template slot="option" slot-scope="option">
      <div class="d-center">
        <img :src='option.owner.avatar_url'/> 
        {{ option.full_name }}
        </div>
    </template>
    <template slot="selected-option" scope="option">
      <div class="selected d-center">
        <img :src='option.owner.avatar_url'/> 
        {{ option.full_name }}
      </div>
    </template>
  </v-select>
  Selected: {{ selected }}
</div>

JS:

Vue.component("v-select", VueSelect.VueSelect);

new Vue({
  el: "#app",
  data: {
    selected: null, // this needs to be filled with the selected value (id or object), but it stays empty
    options: []
  },
  methods: {
    onSearch(search, loading) {
      loading(true);
      this.search(loading, search, this);
    },
    search: _.debounce((loading, search, vm) => {
      fetch(
        `https://api.github.com/search/repositories?q=${escape(search)}`
      ).then(res => {
        res.json().then(json => (vm.options = json.items));
        loading(false);
      });
    }, 350)
  }
});