您好，我正在尝试使用 vue.js 中的已安装函数，但它不起作用

Question

我试图在加载以下网址时自动获取所有产品

'/Admin/ProductsAdmin'

但是挂载的功能不起作用，当 url 加载时它不会加载任何内容 以下是我的 main.js 代码：-

var app = new Vue({
    el: "#app",
    data: {
        loading: false,
        objectIndex: 0,
        productModel: {
            id: 0,
            name: "Product Name",
            description: "Product Description",
            value: 1.99
        },
        products: []
    },
    mounted() {
        this.getProducts();
        console.log("mounted");
    },
    methods:
    {
        getProduct(id) {
            this.loading = true;
            axios.get('/Admin/ProductsAdmin' + id)
                .then(res => {
                    console.log(res);
                    this.products = res.data;

                })
                .catch(err => { console.log(err); })
                .then(() => { this.loading = false; });

        },
        getProducts() {
           this.loading = true;
            axios.get('/Admin/ProductsAdmin')
                .then(res => {
                    console.log(res);
                    this.products = res.data;

                })
                .catch(err => { console.log(err); })
                .then(() => { this.loading = false; });

        },
        createProduct() {
            this.loading = true;
            axios.post('/Admin/products', this.productModel)
                .then(res => {
                    console.log(res.data);
                    this.products.push(res.data);
                })
                .catch(err => { console.log(err); })
                .then(() => { this.loading = false; });

        },
       
        updateProduct() {
    this.loading = true;
            axios.put('/Admin/products', this.productModel, {
                headers: { 'Content-Type': 'application/json' }
            })
                .catch(err => { console.log(err); })
                .then(() => {
                    this.loading = false;
                });
        },
        deleteProduct(id,index) {
            this.loading = true;
            axios.delete('/Admin/products/' + id)
                .then(res => {
                    console.log(res);
                    this.products.splice(index, 1);

                })
                .catch(err => { console.log(err); })
                .then(() => { this.loading = false; });

        },
        editProduct(product, index) {
            this.objectIndex = index;
            this.productModel = {
                id: product.id,
                name: product.name,
                description: product.description,
                value: product.value,
            };
                
        }

    },
    computed: {

    }

});

当我刷新页面或加载以下页面安装功能不起作用时，它什么也不做。请任何人帮助我。

Answer 1

使用创建。

而不是

mounted() {
        this.getProducts();
        console.log("mounted");
    },

使用 Vue 生命周期钩子之一，即

created()

。

created() {
        this.getProducts();
        console.log("created");
    },