报错代码:
<div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id">
<router-link :to="{ path:'/exams/details', query:{ name: this.$route.query.name, id: this.$route.params.id} }" class="btn btn-outline-secondary btn-sm button-size">
点击跳转
</router-link>
<div>
<script>
export default {
data() {
return {
plans: []
}
},
async created() {
//请求到数据时$route没有实例化
const plans = await this.$axios.get('/plans')
this.plans = plans.data
}
</script>
当放入v-for内时就会报如下错误:
TypeError: Cannot read property '$route' of undefined
报错原因:
this指向问题
解决方法:
去除$route前面的this
<div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id">
<router-link :to="{ path:'/exams/details', query:{ name: $route.query.name, id: $route.params.id} }" class="btn btn-outline-secondary btn-sm button-size">
点击跳转
</router-link>
<div>