Vue JS this. $ Set не обновляет реактивность

Question

У меня есть визуализированная таблица v-for, в которой есть продукты.В этой таблице есть столбец для статуса «активный», где я хочу, чтобы пользователь мог нажимать активную кнопку, и она становится неактивной, или нажимает неактивную кнопку, и она становится активной (тумблер в основном).

Iсделать это, сделав POST-вызов на маршрут API, где мой статус обновляется.Это отлично работает.

Проблема в том, что я не могу заставить vueJS обновить затронутый объект в массиве более одного раза.Этот. $ set работает ОДИН раз.Если я нажму на тумблер второй раз, он больше не будет работать.

Это моя таблица:

<table class="table table-striped fancy-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">&nbsp;</th>
                                                <th>Product/Service</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Date Added</th>
                                                <th class="text-center">QTY Sold</th>
                                                <th class="text-center">&nbsp;</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(service, index) in services">
                                                <td class="text-center">
                                                    <img v-if="service.featured_image" :src="service.featured_image" class="table-thumb">
                                                    <img v-else src="/img/default-product.png" class="table-thumb">
                                                </td>
                                                <td>{{service.service_name}}<span class="secondary">${{parseFloat(service.price).toFixed(2)}}</span></td>
                                                <td class="text-center">
                                                    <a href="#" v-if="service.active === 1" @click.prevent="updateStatus(service, index, 0)"><i class="fas fa-circle active"></i></a>
                                                    <a href="#" v-else="service.active === 0" @click.prevent="updateStatus(service, index, 1)"><i class="fas fa-circle inactive"></i></a>
                                                </td>
                                                <td class="text-center">{{ service.created_at | moment("dddd, MMMM Do YYYY") }}</td>
                                                <td class="text-center">10</td>
                                                <td class="text-center"><a href="#"><i class="fal fa-edit table-action-btn"></i></a></td>
                                            </tr>
                                        </tbody>
                                    </table>

Это мой метод управления обновлением:

updateStatus: function(service, index, status) {

            // Grab the authorized user
            const authUser = JSON.parse(window.localStorage.getItem('authUser'))

            // Add a role and refresh the list
            this.$http.post('/api/vendor/services/update/' + service.id + '?updateActive=' + status, { }, { headers: { Authorization: 'Bearer ' + authUser.access_token } }).then((response) => {
                // update this service
                this.$set(this.services, index, response.body);
            }).catch(function(error){
                console.log(error);
            }) 

        }

РЕДАКТИРОВАТЬ:

Я добавил параметр: key в таблицу v-for, но у меня все еще возникает та же проблема.Как вы можете видеть на моей сетевой панели, при первом нажатии на кнопку все идет как положено.Сообщения на маршрут API с updateActive = 0.Во второй раз, когда вы нажимаете кнопку, он отправляет сообщение по маршруту API с updateActive = 1, и данные изменяются на стороне сервера, но в этот момент мой объект в массиве служб не обновляется, поэтому теперь он просто постоянно публикует сообщение с updateActive = 1.вместо того, чтобы показывать мою другую кнопку (тумблер, как я хочу).

Вот скриншот моей сетевой панели с 4 нажатиями на кнопку.

Answer 1

Благодаря @Daniel выше, ответ состоял в том, что я ожидал возврата числового значения (поскольку оно установлено в целое число в MySQL), и мой вызов ajax возвращал это поле в виде строки.

Answer 2

Проблема может заключаться в отсутствии key в вашем v-for

<tr v-for="(service, index) in services">

, вы можете использовать ключ из индекса, но в некоторых случаях это может такжевызвать проблему (например, при удалении одного элемента в массиве последний объект DOM будет удален из-за смещения ключей)

<tr v-for="(service, index) in services" :key="index">

В идеале вы могли бы использовать что-тоуникальный из данных, таких как

<tr v-for="(service, index) in services" :key="service.id">