vue.js - 如何在 vue js 中使用路由器链接?
问题描述
我是初学者,当我从数据库中获取数据以查看时遇到laravel-vue
问题router-link
,一切正常,但是当我设置path
到路由器链接时,它不起作用。
错误是这样的:
无效的道具:道具“to”的类型检查失败。预期的字符串,对象,在 ---> RouterLink 中未定义
这是我的模板代码:-
<template>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">
<router-link :to="data.path">{{data.title}}</router-link>
</h3>
<div class="grey--text">
{{data.created_at}}
</div>
</div>
</v-card-title>
<v-card-text>
{{data.body}}
</v-card-text>
</v-card>
</template>
这是我的脚本:-
<script>
export default {
props:['data']
}
这是我questions
在其中阅读的表单模板视图:-
<template>
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex xs8>
<question v-for="question in questions"
:key="question.path"
:data=question
>
</question>
</v-flex>
sidebar
</v-layout>
</v-container>
</template>
这是论坛脚本:-
<script>
import question from './question'
export default {
data(){
return{
questions:{}
}
},
components:{question},
created(){
axios.get('/api/question')
.then(res=> this.questions = res.data.data)
.catch(error=>console.log(error.response.data))
}
}
</script>
解决方案
你好说它期望一个字符串或一个对象,但它收到了一个未定义的。如何调试这个?你应该分步回去
1. 检查您访问的项目,也许控制台记录它:这里看起来不错:to="data.path" 但数据可能为空或未定义
2。检查道具的变化:它没有改变
3。检查道具传递 :data=question
啊哈!:这是我认为您在这里缺少引号的问题
它应该是:data="question"
<question v-for="question in questions"
:key="question.path"
:data="question"
>
4. 这将是您检查您的请求的地方......所以请始终使用控制台日志检查您的数据,它是如何格式化它包含的内容然后使用它,如果它没问题的话,你可能有一些语法问题
推荐阅读
- php - 如何使用 css、html 为在线商店构建标题、图像和按钮
- gatsby - 如何设置 Gatsby 网站以使用 Netlify?
- java - 如何以编程方式获取 Hibernate 模型的 jOOQ 表?
- multithreading - Vulkan - 我们什么时候需要使用多个逻辑设备(当只有一个物理设备时)?
- vue.js - Vuetify 深色主题自定义不起作用
- python - 导入字典失败
- r - **rticles** 包的 `jss_article()` 中的格式化问题
- javascript - 在 React.js 中可视化谷歌分析数据,编辑 json
- sql - 关于从 SQL 语句/过程生成的多层 XML 的问题
- r - 如何在 R 中转置特定值?