在vue遍历item.child变量有时是object有时是array怎么在界面都遍历出来
时间: 2024-03-03 15:47:25 浏览: 17
可以使用 `v-for` 指令和 `computed` 计算属性来实现在界面上遍历 `item.child` 变量。具体实现方法如下:
1. 在 `computed` 计算属性中,判断 `item.child` 变量的类型,如果是 `object` 类型,则将其转换为包含一个元素的数组,否则直接返回 `item.child` 变量。
```javascript
computed: {
childList() {
if (typeof this.item.child === 'object') {
return [this.item.child];
} else {
return this.item.child;
}
}
}
```
2. 在模板中使用 `v-for` 指令遍历 `childList` 数组,同时根据 `childList` 数组中元素的类型,使用不同的语法渲染对应的内容。
```html
<div v-for="child in childList" :key="child.id">
<div v-if="Array.isArray(child)">
<!-- 渲染数组类型的内容 -->
<div v-for="item in child" :key="item.id">{{ item.name }}</div>
</div>
<div v-else>
<!-- 渲染对象类型的内容 -->
<div>{{ child.name }}</div>
</div>
</div>
```
这样就可以在界面上遍历 `item.child` 变量,并且针对不同的类型使用不同的语法进行渲染。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)