Как добавить данные в модель vue.js после ajax запроса?

Question

[Vanya Huk]

вот код html

<select class="selectpicker" name="car[automodel_id]"  disabled  title="{{Lang::get('nav.car_model')}}">
      <option v-for="models in models" value="@{{model.id}}">@{{model.title}}</option>
</select>

и код vue.js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="_token"]').getAttribute('content');

new Vue({
    el      : 'nav',
    data    :{
        models  : [],       
    },
    methods :{
     
        brands : function ( e ) {

            this.$http.post(Website.href + 'cars/models/' + e.target.value, function (obj){
                this.models = obj.models;
            });
        }
    }
});

задача состоит в том, чтобы после response вывести данные в селект

Answer 1

[Alex]

Можно вот так:

methods :{    
        brands : function ( e ) {
          var vue = this;
            this.$http.post(Website.href + 'cars/models/' + e.target.value, function (obj){
                vue.models = obj.models;
            });
        }
    }

Comments

[Vanya Huk]

Alex : но теперь есть новая задача)
как перезагрузить bootstrap select с етими данными

Answer 2

[Negwereth]

1. У вас this будет или undefined или window (зависит от строгости режима), но уж никак не vue экземпляр.
2. Мутировать коллекции во vue лучше операциями с исходным массивом, а не заменой свойства полностью.

Comments

[Vanya Huk]

Negwereth : можете написать пример, ато я во vue.js новичок, только начал изучать

[Negwereth]

https://codingexplained.com/coding/front-end/vue-j...

В вашем случае должна и полная замена сработать, там на отдельных изменениях проблемы.

А насчёт вашей главной проблемы - ryanmorr.com/understanding-scope-and-context-in-ja...