at-select not work with options rendered async

[aqbjteddy]

Steps to reproduce

0. Adding options in data with [] as default value
1. Adding at-option v-for="options" under at-select
2. at-select not visible if size attribute set to "normal"(default value), you can set it to small or large
3. Adding an ajax call in mounted function to fill options(you can use setTimeout insead)
4. If you click the line(actually it is at-select), the options shown, and if you click one of options, selected text not changed unless :fiterable="true" attribute is added to at-select

Which browser?

Vue: 2.5.8 AT-UI: 1.3.1 AT-UI-Style: 1.5.0 chrome, firefox

What is expected?

at-select worked as expected

What is actually happening?

as steps above

Below is my code:

<template>
<at-select v-model="value" size="large" placeholder="Please select" style="width:200px" :clearable="true">
  <at-option :value="option.index" :label="option.name" v-for="option in options" :key="option.index">{{option.name}}</at-option>
</at-select>
</template>

<script>
import {
  Select as AtSelect,
  Option as AtOption
} from 'at-ui'
import axios from 'axios'

export default {
  components: {
    AtSelect,
    AtOption
  },
  data() {
    return {
      options: [],
      value: null
    }
  },
  mounted() {
    let that = this
    setTimeout(() => {
      that.options = [{
        name: 'test',
        index: 1
      }]
    }, 500)
    return

    axios.get('/api/settings/subjects').then(response => {
      that.options = response.data
    })
  }
}
</script>

[DJanoskova]

Hi. I'm not sure whether this has been fixed, my AT UI select is bugged too and this seems to be the case.

However, if you provide a ref for your <AtSelect /> element, like <AtSelect ref="select" v-model="layoutId" />, you can access the select method called updateOptions(). I had to find this by rummaging in the source code, but I'm glad that I did. Now after I load my data, I call this.$refs.select.updateOptions().

Hope this helped.