Question

我学习Vue JS，我有一个问题。我尝试在打开要与ComboBox一起使用的页面（我使用Promise）之前在后端使用查询初始化数组（listProductType）。变量已初始化并显示在控制台中，但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 instance Lifecycle Diagram中所看到的那样，仅在创建实例之后才对反应性进行初始化。我不会在这样的早期挂钩中访问数据属性。 beforeMount钩子要安全得多。（而不是beforeCreate）

：

请勿在options属性或回调中使用箭头功能，例如创建：（）=> 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
        })
},

您没有提供任何小提琴或正常工作的例子，所以我不确定，但是它应该对您有用。如果没有，请告诉我们，我们将尝试更深入地研究。

尽管变量已初始化，为什么我的ComboBox为空？

1 个答案: