Vue JS this。$ set不更新反应性

Question

我有一个v-for渲染表，其中包含产品。 该表具有“活动”状态列，我希望用户能够单击活动按钮，使其变为非活动状态，或者单击非活动按钮并变为活动状态（基本上是拨动开关）。

我通过对api路由进行POST调用来实现此功能，在该路由中更新了我的状态。 这很好。

问题是我无法让vueJS多次更新数组中的受影响对象。 this。$ 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);
            }) 

        }

EDITS：

我在v-for表中添加了：key参数，但仍然遇到相同的问题。 正如您在我的网络面板中看到的那样，第一次单击该按钮时，它按预期进行。 使用updateActive = 0发布到api路由。 第二次单击该按钮时，它以updateActive = 1的形式发布到api路由，并且服务器端已更改数据，但是此时，我的服务数组中的对象未更新，因此它现在只是连续以updateActive = 1的形式发布。而不是显示其他按钮（像我想要的那样切换开关）。

这是我的网络面板的屏幕截图，单击按钮四次。

Answer 1

这里的问题可能是您的v-for缺少key

<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">

Answer 2

感谢上面的@Daniel，答案是我期望返回一个数字值（因为在MySQL中将其设置为整数），而我的ajax调用将该字段作为字符串返回。