时间戳

首页 > 解决方案 > 如何在 Vue 组件的 URL 中传递或获取 UserId 和 QuizId？拉拉维尔 7

laravel - 如何在 Vue 组件的 URL 中传递或获取 UserId 和 QuizId？拉拉维尔 7

问题描述

我能够在 Vue 组件中获取 UserId(users table) 和 QuizId(quizzes table)，但无法传递 URL 地址中的值。

测验刀片：

    <quiz-component
   :times ="{{$quiz->minutes}}"
   :quizId="{{$quiz->id}}"
   :quiz-questions = "{{$quizQuestions}}"
   :has-quiz-played ="{{$authUserHasPlayedQuiz}}"
   :userId = "{{Auth::user()->id}}"
   >
   </quiz-component>

来自 Component.vue 的代码部分：

<p>{{quizid}}</p> //here I'm able to get Quizid
<p>{{userid}}</p> //here I'm able to get UserId
-------------------------------
export default {
props:['quizid', 'quizQuestions', 'hasPlayedQuiz', 'times', 'userid'],

               axios.post('/quiz/create',{

                answerId:this.currentAnswer,
                questionId:this.currentQuestion,
                quizId :this.quizid,
                userId :this.userid,

            }).then((response)=>{
                console.log(response)
            }).catch((error)=>{
                alert("Error!")
            });

现在我想在 URL 中传递相同的用户 ID 和 quizId，但 url 地址打开-> http://quizmaster.test/statsquizresult/userId/quizId <-this。

而不是这个，我想得到这样的 URL->http://quizmaster.test/statsquizresult/2/8 <- 因为 UserId 是 2 而 QuizId 是 8。

data(){     

return{

            url_challenge: 'http://quizmaster.test/homeresult',

            url_self: 'http://quizmaster.test/statsquizresult/userId/quizId'

            // url_self: 'http://quizmaster.test/allquizresult'

        }
    },

我还有一个按钮，可以将用户带到他/她的结果：

<a v-bind:href="url_self"><button class="btn btn-info">View Result</button></a>

但 URL 地址没有获取/传递 UserId 和 QuizId 值。

谢谢。

标签： laravelvue.jsvue-component

解决方案

是的，它url_self是静态的，没有传递所需的 ID。

要传递所需的 id 并获取动态 url，您必须使用计算属性来描述 url 应该是什么，因为它取决于quizid和useridprop 值：

export default {
    props: ['quizid', 'quizQuestions', 'hasPlayedQuiz', 'times', 'userid'],
    data() {
        return {
            ...
        }
    },
    computed: {
        url() {
            return `http://quizmaster.test/statsquizresult/${this.userid}/${this.quizid}`;         
        }
    }

}

然后，您可以像这样绑定url()到 href：

<a v-bind:href="url"><button class="btn btn-info">View Result</button></a>

推荐阅读