dcloudio / dcloudio/uni-app

小程序递归组件响应式异常,在H5页面中是正常使用的

Open
#4,719 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
小程序递归组件响应式异常,在H5页面中是正常使用的

**复现步骤**
[复现问题的步骤]
1. 启动 '...'
2. 点击 '....'
3. 查看

[或者可以直接贴源代码]

**Index.vue**
```vue





{{ layer }} id({{ item.id }}): {{item.persons[0].name}}
删除..
添加..
添加Sub




import Nodes from './nodes.vue';
export default {
name: "Nodes",
props: {
value: {
type: Array,
default: []
},
layer: {
default: 1
}
},
components: {
Nodes
},
data() {
return {
title: 'Hello'
}
},
onLoad() {

},
methods: {
onDel(item) {
this.value.splice(this.value.findIndex(i => i.id == item.id), 1)
this.$emit('input', this.value)
console.log('delete: ', item)
},
onAdd(item) {
this.value.splice(this.value.findIndex(i => i.id == item.id), 0, {
id: new Date().getTime(),
persons: [
{
name: "new node"
}
],
children: []
})
this.$emit('input', this.value)
console.log('add: ')
},
onAddSub(item) {
item.children.splice(0, 0, {
id: new Date().getTime(),
persons: [
{
name: "new node"
}
],
children: []
})
this.$emit('input', this.value)
console.log('add: ')
}
}
}

```
nodes.vue
```vue





{{ layer }} id({{ item.id }}): {{item.persons[0].name}}
删除..
添加..
添加Sub




import Nodes from './nodes.vue';
export default {
name: "Nodes",
props: {
value: {
type: Array,
default: []
},
layer: {
default: 1
}
},
components: {
Nodes
},
data() {
return {
title: 'Hello'
}
},
onLoad() {

},
methods: {
onDel(item) {
this.value.splice(this.value.findIndex(i => i.id == item.id), 1)
this.$emit('input', this.value)
console.log('delete: ', item)
},
onAdd(item) {
this.value.splice(this.value.findIndex(i => i.id == item.id), 0, {
id: new Date().getTime(),
persons: [
{
name: "new node"
}
],
children: []
})
this.$emit('input', this.value)
console.log('add: ')
},
onAddSub(item) {
item.children.splice(0, 0, {
id: new Date().getTime(),
persons: [
{
name: "new node"
}
],
children: []
})
this.$emit('input', this.value)
console.log('add: ')
}
}
}

```

**预期结果**
**H5页面:**
![image](https://github.com/dcloudio/uni-app/assets/81201877/fcd02d47-c15c-4f1c-9f37-3733c7b20851)
点击添加节点、子节点、删除时页面可以正常更新

**实际结果**
**小程序页面**
![image](https://github.com/dcloudio/uni-app/assets/81201877/667da600-45ee-42ba-8165-a45536a2fcfa)
点击添加节点、子节点、删除时页面未正常更新,连续点击删除会因为实际数据被删除导致空指针异常

**系统信息:**
- 发行平台: 微信小程序
- 操作系统 [如 iOS 12.1.2、Android 7.0]
- HBuilderX版本 3.4.15.20220610
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供`npm run info`的运行结果]
- 设备信息 微信开发工具 Stable 1.06.2308310

**补充信息**
![image](https://github.com/dcloudio/uni-app/assets/81201877/428f2684-3a4a-487b-98e5-7e3cc600082e)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.