Vue.js 在vue中提交后更改价格

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

所以我想先把它取下来，然后再推上去，但这也没用，产品不会被取下来，推上去也不会改变价格

我也在使用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>

名称
数量
价格
{{product.name}
{{product.price}}
拯救
导出默认值{
道具：[“巴士”]，
数据（）{
返回{
类别：空，
价格：空，
单猫：''，
数量：{}，
类别选项卡：“衬衫”
}
},
计算：{
},
方法：{
getProductsCategories（）{
get（'/api/admin/products/categories'）。然后（响应=>{
this.categories=response.data.categories；
this.products=response.data.products；
this.products.forEach（r=>{
此数量[r.name]={
姓名：r.name，
数量：r.qty
}
})
})
},
updatePrice（）{
axios.post（`/api/admin/products/price`{
价格：这个
})。然后（响应=>{
response.data.updated.forEach（u=>{
设p=this.products.find（product=>product.name==u.name）；
this.products.forEach（product=>{
if（product.name==r.name）{
本.产品.切片（产品）；
}
})
这是我的产品({
“数量”：单位数量，
“名称”：u.name，
“价格”：美国价格，
})
})
});
}
},
安装的（）{
这个.getProductsCategories（）；
}
}

这可能无法解决您的问题，但在updatePrice（）中，您有“if（product.name==r.name）{”，这不应该是“if（product.name==u.name）{”吗？