vuejs：vue-select 组件不更新值

Question

我正在尝试将 vue-select 组件用于下拉列表。至此我写完了。

<template>
    <div>
        <v-select label="name" key="id" :v-model="selected" :reduce="data => data.id" :options="items" @input="update()" />
    </div>

</template>

<script>
export default {
  props: {
      initial: {
        type: [String, Number],
        default: 0,
      },
      api_call: {
          type: String,
          required: true,
      },

  },

  data(){

      return {
          value: this.initial,
          items: [],
      }

  },

  computed: {
      selected: {
          get() {
              return this.value;

          },
          set(val) {
              return this.value = val;
          }
      },
  },
  methods:{
      update() {
          console.log('selected', this.selected, this.value);
          this.$emit('input', this.selected);

      },
      getData: function(){

        axios.get('/api/' + this.api_call)
        .then(function (response) {
            this.items = response.data;
        }.bind(this));

      },
    },
    created(){
      this.getData();
    }

  }

下拉列表按预期填充，选择一个项目将其插入输入字段。我遇到的两个问题是

选择某些内容时，value 和 selected 变量都不会更改。
我还传递了一个 initial 值，我想将其选为列表中的默认值。

Answer 1

从 v-model 指令中删除绑定符号 :

 <v-select label="name" key="id"  v-model="selected" :reduce="data => data.id" :options="items" @input="update()" />

并初始化你的 value 就像：

  data(vm){//vm refers to this

      return {
          value: vm.initial,
          items: [],
      }

  },

或：

  data(){

      return {
          value: null,
          items: [],
      }

  },
mounted(){
this.value=this.initial
}

vuejs：vue-select 组件不更新值

vuejs: vue-select component not updating values

javascript

vue.js

vue-select