Javascript Vue JS此.$集未更新
我有一个v-for渲染表,其中包含产品。此表有一列“活动”状态,我希望用户能够单击“活动”按钮并将其变为非活动状态,或者单击“非活动”按钮并将其变为活动状态(基本上是一个切换开关) 我通过对更新状态的api路由进行POST调用来实现这一点。这个很好用 问题是我无法让vueJS多次更新阵列中受影响的对象。这个.$set只工作一次。如果我再按一下拨动开关,它就不工作了 这是我的桌子:Javascript Vue JS此.$集未更新,javascript,arrays,vue.js,vuejs2,Javascript,Arrays,Vue.js,Vuejs2,我有一个v-for渲染表,其中包含产品。此表有一列“活动”状态,我希望用户能够单击“活动”按钮并将其变为非活动状态,或者单击“非活动”按钮并将其变为活动状态(基本上是一个切换开关) 我通过对更新状态的api路由进行POST调用来实现这一点。这个很好用 问题是我无法让vueJS多次更新阵列中受影响的对象。这个.$set只工作一次。如果我再按一下拨动开关,它就不工作了 这是我的桌子: <table class="table table-striped fancy-table">
<table class="table table-striped fancy-table">
<thead>
<tr>
<th class="text-center"> </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"> </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>
编辑:
我已经在v-for表中添加了一个:key param,但仍然遇到同样的问题。正如您在“我的网络”面板中看到的,第一次单击该按钮时,它会按预期运行。发布到UpdateActivity=0的api路由。第二次单击按钮时,它以updateActivity=1发布到api路由,数据在服务器端更改,但此时,服务数组中的我的对象没有更新,因此它现在只是以updateActivity=1持续发布,而不是显示我的另一个按钮(如我所希望的切换开关)
这是我的网络面板的屏幕截图,点击按钮4下
这里的问题可能是您的
v-for
您可以使用索引中的键,但在某些情况下也可能会导致问题(例如,当删除数组中的单个项时,最后一个DOM对象将被删除,因为键会移动)
理想情况下,您可以使用数据中独特的内容,如
多亏了上面的@Daniel,答案是我希望返回一个数值(因为它在MySQL中设置为整数),而我的ajax调用将该字段作为字符串返回 我编辑了上面的问题。添加了密钥,但仍遇到相同的问题。是否在浏览器中使用vue devtools?您应该能够看到组件中的数据是否正在更改,并且没有为此更新domAny建议。虽然这没有引起问题,但您的代码的这部分是不正确的v-else=“service.active==0”
`v-else'不接受任何参数扫描您显示带有active
的响应?我“我想知道是否存在类型错配,我在函数=updateStatus中没有看到任何要更改的代码service.active
。response.body.active的类型是什么?是一个字符串吗?这是一个按预期工作的字符串,服务器响应是存根的。你能给回复主体添加一个完整的屏幕截图吗?@Daniel这正是问题所在,是类型不匹配。抢手货我原以为是一个整数,结果它返回了一个字符串:D谢谢!就在上周,我面临着同样的问题\_(ツ)_/“
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);
})
}