javascript - 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();
    }

  }

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

1. value选择某物时，selected变量均不改变。
2. 我还传递了一个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
}