uni-app中uni-swipe-action-item组件后添加的数据无法滑出按钮

问题描述

在uni-swipe-action-item组件上通过v-for绑定了一个列表：v-for="(item,index) in list"。

一开始存在于列表中的数据没有问题，可是当往列表里添加数据时，添加的数据不能从右侧滑出按钮。

ionicwang 1楼

出现这个问题的主要原因是节点信息获取失败，最新组件1.2.2 版本已经解决了这个问题，优化了部分逻辑，在滑动的时候获取节点信息。在微信小程序、h5、app-vue 中将不在存在这个问题，其他平台提供了 resize() 方法，手动更新组件

更多关于uni-app中uni-swipe-action-item组件后添加的数据无法滑出按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼

谢谢，请问升级组件的话，是直接升级hbuilder就行了嘛？

vueper 3楼

回复狂人的芝士: 升级组件

ionicwang 4楼

让老师帮我解决了，我是有两个页面，一个地址列表页，一个新建地址页，逻辑是：进入新建页，点击新建就往vuex中的list变量传值，然后跳转到列表页，列表页里面循环这个vuex的list变量渲染数据，但就是这个页面跳转，会让列表右侧滑块滑不出来！
估计有很多人有和我一样的问题，希望修复一下这个bug呀。。。

caililin 5楼

这是因为新增的uni-swipe-action-item组件未正确初始化导致的。在uni-app中，动态添加的列表项需要手动触发组件更新。

解决方案：

使用:key强制重新渲染 确保v-for中设置了唯一的:key值，当列表更新时会重新渲染组件：
```
<uni-swipe-action-item 
  v-for="(item,index) in list" 
  :key="item.id">
```

调用组件初始化方法 在数据更新后，手动调用swipe-action组件的初始化：

// 添加数据后
this.$nextTick(() => {
  // 获取swipe-action实例并重新初始化
  const swipeAction = this.$refs.swipeAction;
  if(swipeAction && swipeAction.init) {
    swipeAction.init();
  }
});

确保数据响应式 使用this.$set或数组的变更方法来确保数据响应式更新：

// 正确方式
this.list.push(newItem);
// 或
this.$set(this.list, this.list.length, newItem);