易错点解析
- 遍历嵌套数据:外层套里层,外层的数据得先有,由于里层的数据依赖外层,才能继续渲染
- 数据格式类似这样:
[
{
id:1
name:'xxx'
categoryChild:[...] // 继续上面的套路,包裹一个个对象,里面再包裹[]...
}
{...}
{...}
]
- 结构如下:
<!--第一层-->
<div class="item" v-for="(item1,index) in categoryList" :key="item1.categoryId">
<h3>
<a href="">{{item1.categoryName}}</a>
</h3>
<div class="item-list clearfix"><!--第二层-->
<div class="subitem" v-for="(item2,index) in item1.categoryChild" :key="item2.categoryId">
<dl class="fore">
<dt><!--第二层遍历不能写这,写这就和第三层平级,导致第三层数据无法遍历出来-->
<a href="">{{item2.categoryName}}</a>
</dt>
<dd>
<!--第三层遍历-->
<em v-for="(item3,index) in item2.categoryChild" :key="item3.categoryId">
<a href="">{{item3.categoryName}}</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
router
再次跳转到同一组件,页面不刷新的问题
path
路径一定要添加params参数
(没这个参数就不会刷新)
### router.js
......
{
name:"search",
// path:"/search",
path: '/search/:keyword?', // 一定要传
component:Search,
meta:{show:true}
},
### xxx.index.vue
......
goSearch(){
let location = {name:'search',params:{keyword:this.keyword}}
if(this.$route.query){
location.query = this.$route.query
}
this.$router.push(location)
}
async
和await
解析
-
为什么要用?因为我要直接的结果,而不是一个破对象(Promise对象)
-
先发一个普通请求
......
const actions = {
......
getBannerList({commit}){
var res = reqGetBannerList();
console.log(res) // 返回一个Promise对象,需要的数据藏得比较深
......
}
}
- 加上这两个关键字
const actions = {
......
async getBannerList({commit}){
var res = await reqGetBannerList();
console.log(res) // 直接返回需要的结果: {code: 200, data: Array(4)}
}
}
- 目前的结论:
async
和await
实质就是对Promise对象
的进一步封装,通过它可以直接获取我们需要的数据
布尔
判断注意事项
- 空对象是
true
,而空字符串
是false
Boolean({})
>>>true // 特别注意
Boolean('')
>>>false