Блог

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

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

Я также использую 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>