Почему мой ComboBox пуст, хотя переменная инициализирована?

Question

Я изучаю Vue JS, и у меня есть вопрос.Я пытаюсь инициализировать массив (listProductType) с запросом на бэкэнд перед открытием страницы (я использую Promise) для использования с ComboBox.Переменная инициализируется и отображается в консоли, но ComboBox пуст.

Пожалуйста, помогите решить проблему и исправить код.

HTML:

   <div id="sendForm">
<div class="productTypeBlock">
    <p><b>Product type</b></p>
    <input id="idProductType" v-model="nameOfProductType" placeholder="Product type">
    <button id="sendProductType" @click="getAlert">Сохранить</button>
</div>
<div class="productCategoryBlock">
    <p><b>Product Category</b></p>
    <select>
        <option selected="selected" disabled>Product Category</option>
        <option v-for='index in listProductType'>{{index.id}} / {{index.name}}</option>
    </select>
</div>
</div>

main.js

var vm = new Vue({
el: "#sendForm",
data:{
    nameOfProductType: "",
    listProductType: []
},
beforeCreate:() => {
    new Promise((resolve, _) => {
        axios
        .get('http://localhost/admin/getListProductType')
        .then(response => {
            resolve(this.listProductType = response.data);
            console.log(listProductType);
            });
    })
},
methods:{
    getAlert(){
        var productType = {
                name: this.nameOfProductType
            };
        //console.log(productType)
        axios({
            method: 'post',
            url: 'http://localhost/admin/addProductType',
            data: productType
        });
    }
}
});

Answer 1

Я заметил несколько небольших проблем в вашем коде:

1. как вы можете видеть на диаграмме жизненного цикла экземпляра vue , реактивность инициализируется только после создания экземпляра. я бы не стал обращаться к свойствам данных в таком раннем хуке beforeMount крючок намного безопаснее. (вместо beforeCreate)

2. из документов:

   Не используйте функции стрелок для свойства опций или обратного вызова, таких как созданный: () => console.log (this.a)

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

3. ваш код находится внутри обещания, которое никогда не будет решено.

Итак, полное решение должно быть:

beforeMount(){
        axios.get('http://localhost/admin/getListProductType')
        .then(response => {
            this.listProductType = response.data
        })
},

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