CODEWITHSUNDEEP
javascriptvue.jsvue-select
matt
matt

Reputation: 2039

vuejs: vue-select component not updating values

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

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

Upvotes: 1

Views: 3843

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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
}

Upvotes: 1

Related Questions