需求是这样的,我要在添加产品成功之后,带着产品类别的catId跳转到产品页面以查询此类别下的产品,这不是很简单吗,不是传进来就行了吗,OK,我们来look一look
<template>
<el-select
@change="cateOneChange"
v-model="catId"
:placeholder="defaultClassOneName"
size="mini"
class="class-one-two"
>
<el-option
v-for="item in categoryClassOneList"
:key="item.catId"
:label="item.catName"
:value="item.catId"
></el-option>
</el-select>
</template>
<script>
export default{
data(){
return:{
catId:'',
categoryClassOneList:[
{
catId:280,
catName:"戒指",
},
{
catId:282,
catName:"吊坠",
},
{
catId:289,
catName:"帽子",
}
]
}
},
created(){
//在这里接收上一个页面传进来的id
this.catIdOne=this.$route.query.id; //289
}
}
</script>
OK,十分自信地打开浏览器…见证奇迹…
???282?什么鬼,我的吊坠呢,为什么不是显示我的吊坠,为什么是282
我不要!!!我要的是吊坠!!!
于是我开始了各种某度…
尝试了半小时…无果…人生就是这么的起起落落落落落落落落落落…
随后,放弃自我治疗的我把魔爪伸向了我的前辈大佬…哦不,是请求他的援助之手
真相逐渐浮出水面…
哎,原来是数据类型作的妖
在this.$route.query.id接收到的是字符串,而上面value绑定的是数字类型,在这里数据类型要求比较严格
相当于“282”===282 为false,所以没有找到对应的吊坠
转换一下数据类型吧
created(){
//在这里接收上一个页面传进来的id
this.catIdOne=Number(this.$route.query.id) //289
}
于是,我的吊坠出来了,这次终于没有扑街了…