如何在vue js中使用router-link？

Question

我是 laravel-vue 的初学者，当我从数据库中获取数据进行查看时，router-link 出现问题，一切正常，但是当我设置 path 到路由器 link，它不起作用。

错误如下：

Invalid prop: type check failed for prop “to”. Expected String, Object, got Undefined found in ---> 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>

Answer 1

你好是说它期待一个字符串或一个对象，但它收到了一个未定义的。如何调试这个？你应该按步骤返回

1.检查您访问的项目，也许控制台记录它： 这里看起来不错：to="data.path" 但数据可能为空或未定义
2。检查道具是否有变化：它没有变化
3。检查道具传递 :data=question 啊哈！：这是问题所在 我认为你在这里缺少 quotes

应该是:data="question"

<question v-for="question in questions"
            :key="question.path"
            :data="question"
            >

4.这将是你检查你的请求的地方 ...所以总是用控制台日志检查你的数据，它是如何格式化它包含的内容然后使用它，如果它没问题比你可能有语法问题

如何在vue js中使用router-link？

How to use router-link in vue js?

vue.js

vue-router

laravel-vue