[Vuejs]-Cannot trigger data selected in vue-select when show record

by

0👍

Your data declaration is wrong, you need to return form inside the returned object.

import vSelect from 'vue-select'

export default {
  components: { 'v-select': vSelect },
  data () {
    const 
    return {
      provinces: [],
      form: {
          province_id: undefined
      }
    }
  },
}

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app',
  data() {
    return {
      provinces: [
        { name: 'province 1', province_id: 'p_1' },
        { name: 'province 2', province_id: 'p_2' },
        { name: 'province 3', province_id: 'p_3' },
      ],
      form: {
        province_id: ''
      }
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<div id="app">
   Selected {{ form.province_id }}
  <v-select
    v-model="form.province_id"
    name="province_id"
    :options="provinces"
    :reduce="province => province.province_id" 
    label="name"
    :clearable="false"
    :searchable="true" />
</div>

Leave a comment