add item problem

[jotender]

my system setting is here:

vue.js version: vue2
using library:
1. vue-cli
2. bootstrap-vue

and my source code

<b-col sm="2">
          <v-selectmenu 
            :data="app_list"
            language='en'
            :multiple='true'
            key-field="id"
            show-field="name"
            v-model="app_value"
            title='Select Your App'
            ref='test'>
          </v-selectmenu>        
</b-col>
<script>
import vSelectMenu from 'v-selectmenu'
Vue.use(vSelectMenu);

export default {
    name : 'App_test',  
    props: ['sessionKey'],
    components: {
    },
    data:function () {
       let options = qs.parse(location.search, { ignoreQueryPrefix: true })
       return {
           app_value:'',
           app_list:[
               {
                   id:0, name:'test',
               }
           ],
     },
    methods:{
        getDate(){
            let url = myUrl;
            let api_url = axios.get(url)
            api_url.then((response)=>{
                 for(let i =0; i<response.data.length; i++){
                        this.app_list.push({id:i+1, name:response.data[i]})
                 }
            })
        }
    }
}

However, v-selectmenu list can't update variable values. looks like this.

result:

menu list: test
console.log(app_list):
[ { "id": 0, "name": "test" }, { "id": 1, "name": "HAI" }, { "id": 2, "name": "TEST012" } ]

How can i solve this problem?

[TerryZ]

When did you call getDate method ?

[jotender]

Oops! i omit this information

created: function(){
this.getDate();
}

this is my answer

[TerryZ]

So far v-selectmenu are not support data source hot replace, it will supported in futrue release.

The current solve solution, try to use v-if like this:

<v-selectmenu :data="app_list" v-if="app_list.length > 1"></v-selectmenu>

[jotender]

it works! thx!

[johnwhelchel]

I really think this should work out of the box. The following is a work-around that re-renders the element, triggering the life-cycle. It's more expensive unfortunately than hot reloading.

<v-selectmenu...
...
:key="dataToUse.length"
...>

[TerryZ]

In the last release, the result list will auto updated when data prop change.