Не удается активировать данные, выбранные в vue-select, когда отображается запись - PullRequest
Новая
       29

Не удается активировать данные, выбранные в vue-select, когда отображается запись

0 голосов
/ 31 мая 2019

Я использую vue-select. Я выбираю провинцию_идентификатор, затем создаю запись, но при показе записи я не могу активировать выбранные данные для выбора2. 

<v-select
  v-model="form.province_id"
  name="province_id"
  :options="provinces"
  :reduce="province => province.province_id" 
  label="name"
  :clearable="false"
  :searchable="true" />

import vSelect from 'vue-select'

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

1 Ответ

0 голосов
/ 31 мая 2019

Ваше data объявление неверно, вам нужно вернуть form внутри возвращенного объекта. 

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>
...