vue.js - 在 vue 中提交后更改我的价格

Question

我试图在更新价格后更新我的产品，但我遇到的问题是，除非我刷新我的页面，否则在更新后不会显示更改。

所以我想把它取下来，然后把它推高，但这也不管用，产品没有被删除，推高也不会改变价格。

我也在用vue。

这是我的代码

<template>
    <div>
        <div class="row my-5">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">

                            <li class="nav-item" role="presentation" v-for="category in categories">
                                <a class="nav-link active"
                                id="home-tab"
                                data-toggle="tab"
                                :href="'#'+category"
                                role="tab"
                                aria-controls="home"
                                aria-selected="true"
                                @click="changeCategory(category)"
                                >
                                    {{ category }}
                                    {{ getSingleCat(category) }}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">

                            <div class="tab-pane fade show active" :id="categoryTab">
                                <div>
                                    <table class="table table-sm table-bordered">
                                        <thead class="bg-primary">
                                        <tr>
                                            <th>Name</th>
                                            <th>Qty</th>
                                            <th>Price</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="product in products" v-if="product.category === categoryTab">
                                                <td>{{ product.name }}</td>
                                                <td>
                                                    <input
                                                        type="number"
                                                        v-model="qty[product.name]['qty']"
                                                    >
                                                </td>
                                                <td>{{ product.price }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div>
                                    <div class="btn btn-success" @click="updatePrice()">
                                        Save
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['bus'],
    data() {
        return {
            categories: null,
            prices: null,
            singleCat: '',
            qty: {},
            categoryTab: 'SHIRTS'
        }
    },
    computed: {
    },
    methods: {
        getProductsCategories(){
            axios.get('/api/admin/products/categories').then(response => {
                this.categories = response.data.categories;
                this.products = response.data.products;

                this.products.forEach(r => {
                    this.qty[r.name] = {
                        name: r.name,
                        qty: r.qty
                    }
                })
            })
        },
        updatePrice(){
            axios.post(`/api/admin/products/price`, {
                price: this.price
            }).then(response => {
                response.data.updated.forEach(u => {
                    let p = this.products.find(product => product.name === u.name);

                    this.products.forEach(product => {
                        if(product.name === r.name){
                            this.products.slice(product);
                        }
                    })

                    this.products.push({
                        'qty' : u.qty,
                        'name': u.name,
                        'price' : u.price,
                    })
                })
            });
        }
    },
    mounted(){
        this.getProductsCategories();
    }
}
</script>

标签： vue.js