vue.js - 如何使用 v-select 获取值，使用插槽模板从 ajax 加载的选项

Question

我试图在我的 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)
  }
});

标签： vue.jsvuejs2v-select