uni-app 在app端数据列表组件封装后从B页面删除数据返回A页面无法再进行事件响应

uni-app 在app端数据列表组件封装后从B页面删除数据返回A页面无法再进行事件响应

开发环境 版本号 项目创建方式
Windows 企业版 LTSC HBuilderX

产品分类：uniapp/App

测试过的手机：

  • iPhone 8 系统版本14.5
  • realemeQ3 系统版本Android 11

示例代码：

<p>A页面：</p>
<pre><code>&lt;template&gt;  
     &lt;view&gt;  
      &lt;list-item v-for="item in typeList" :key="item.id" :objc="item"  @click="test"&gt; &lt;/list-item&gt;  
     &lt;view&gt;  
&lt;/template&gt;  

test(){  

let url = ....  
const self = this;  
uni.navigateTo({  
    url: url,  
    events: {  
        getCurrentKey(data) {  
            const {  
                key  
            } = data;  
            const index = self.typeList.findIndex(item =&gt;item.id== parseInt(key));  
            if (index != -1) {  
                self.typeList.splice(index, 1)  
                console.log("删除后", self.typeList)  
               // 此时无法点击 item了  
            }  
        }  
    }  
})  

}  
</code></pre>

更多关于uni-app 在app端数据列表组件封装后从B页面删除数据返回A页面无法再进行事件响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已确认，已加分，后续优化

更多关于uni-app 在app端数据列表组件封装后从B页面删除数据返回A页面无法再进行事件响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个bug有修复吗？很影响使用。。。

这是一个典型的页面通信和组件状态更新问题。当从B页面删除数据返回A页面后，组件的事件响应失效通常是由于以下原因：

  1. 数据响应式丢失：直接使用splice修改数组后，Vue的响应式系统可能未能正确触发组件更新
  2. 事件监听器失效：组件重新渲染过程中事件绑定可能出现问题

解决方案：

// 在A页面中修改
getCurrentKey(data) {
    const { key } = data;
    const index = this.typeList.findIndex(item => item.id == parseInt(key));
    if (index != -1) {
        // 使用Vue.set或重新赋值确保响应式
        this.typeList.splice(index, 1);
        // 强制重新赋值触发响应式更新
        this.typeList = [...this.typeList];
        console.log("删除后", this.typeList);
    }
}

替代方案：使用页面通信

// A页面
test(){
    uni.navigateTo({
        url: url,
        events: {
            getCurrentKey: (data) => {
                this.handleDelete(data.key);
            }
        }
    });
},

handleDelete(key){
    this.typeList = this.typeList.filter(item => item.id !== parseInt(key));
}

推荐做法：使用Vuex进行状态管理

// store中管理数据
deleteListItem(id) {
    const index = this.state.typeList.findIndex(item => item.id === id);
    if (index !== -1) {
        this.state.typeList.splice(index, 1);
    }
}
回到顶部