vuejs: vue-select component not updating values

Question

I am trying to use the vue-select component for a dropdown list. So far I have written.

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

  }

The dropdown list populates as intended and selecting an Item inserts it in the input filed. The two problems I have are

Neither the value nor the selected variables change when something is selected.
I am also passing in an initial value which I would like to be selected as the default in the list.

Boussadjra Brahim · Accepted Answer · 2020-10-17 16:57:29Z

1

Remove the binding sign : from v-model directive

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

and init your value like :

  data(vm){//vm refers to this

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

  },

or :

  data(){

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

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

answered Oct 17, 2020 at 16:57

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matt Over a year ago

just removing the : made everything work for me. That little mistaken had me banging my head against my keyboard for hours. Thank you for your help.

Collectives™ on Stack Overflow

vuejs: vue-select component not updating values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related