### 动态添加属性至多层嵌套
数组对象
在处理复杂的 JavaScript 数据结构时，特别是当涉及到多层嵌套的
数组和
对象组合的情况下，可以采用递归函数的方式来遍历整个数据树并动态地为指定的
对象节点添加新的属性。
对于当前的需求，在 Vue.
js 中实现对多层
数组内
对象增加 `onview` 属性，并允许其值被更改以响应用户的交互行为。下面是一个具体的解决方案：
#### 使用递归方法更新深层嵌套的数据
为了确保不会意外地修改原始数据源（除非这是预期的行为），建议先复制一份工作副本再做改动。这里可以通过深拷贝技术来完成这一目的[^3]。
```javascript
function deepClone
(obj
) {
return
JSON.parse
(JSON.stringify
(obj
));
}
```
接着定义一个辅助性的递归函数用来查
找所有的子项并将新属性附加上去:
```javascript
function addOnViewProperty
(data, default
Value) {
data.forEach
(item => {
if
(Array.isArray
(item
)) {
// 如果当前元素还是
数组，则继续深入一层调用本函数
addOnViewProperty
(item, default
Value);
} else if
(typeof item === 'object' && item !== null
){
// 当前元素是
对象而非
数组时为其设置 onview 属性
Object.assign
(item, { onview: default
Value }
);
}
}
);
}
```
最后一步是在组件初始化阶段应用上述逻辑并对视图绑定事件监听器以便于用户触发状态变更:
```html
<div id="app">
<ul>
<!-- 假设 items 是经过预处理后的顶层列表 -->
<li v-for="
(item, index
) in processedItems" :
key="index">
{{ renderContent
(item
) }}
<button @click="toggleOnViewItem
(index
)">Toggle On View</button>
</li>
</ul>
</div>
<script>
new Vue
({
el: '#app',
data
() {
return {
originalData: /* 初始化你的原始数据 */,
processedItems: []
};
},
created
() {
this.processedItems = deepClone
(this.originalData
); // 复制初始数据以防污染源头
addOnViewProperty
(this.processedItems, false
); // 默认关闭所有项目的查看模式
},
methods: {
toggleOnViewItem
(index
) {
const currentItem = this.findItemByIndex
(this.processedItems, index
);
function findItemByIndex
(items, idx
) {
let found;
items.some
((el, i
) => {
if
(i===idx || Array.isArray
(el
)){
found = typeof el[idx]!=='undefined'?el[idx]:findItemByIndex
(el,idx
);
return !!found;
}
}
);
return found;
}
currentItem.onview = !currentItem.onview;
console.log
('Updated Item:', currentItem
);
},
renderContent
(item
) {/* 渲染具体的内容 */}
}
}
);
</script>
```
这段代码展示了如何利用 Vue 的双向绑定特性以及自定义的方法去控制复杂层次结构下的 UI 组件的状态变化。每当按钮被点击的时候，对应的项目就会切换它的可见性标志位 `onview`，进而影响前端界面的表现形式[^1]。
扫一扫
3262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
