时间戳

首页 > 解决方案 > VueJS 路由点击章节测验

laravel - VueJS 路由点击章节测验

问题描述

我是 vuejs 的新手。我需要使用路径 /chapter/{{id}}/quiz 创建一个路由器链接测验。它将打开另一个组件

小路

    { path: '/chapter/:id(\\d+)/quiz', component: require('./components/Quiz.vue') },

路由器链接

            <a href="#" @click="editModal(chapter)">
                        <i class="fa fa-edit blue"></i>
                    </a>
                    /
                    <router-link :to="/chapter/{{chapter.id}}/quiz">
                        <i class="fa fa-question-circle blue"></i>
                    </router-link>

目前我收到错误属性内插值已被删除。请改用 v-bind 或冒号简写。例如，代替<div id="{{ val }}">, 使用<div :id="val">

标签： laravelvue.js

解决方案

您不能{{ }}用于属性值。因此，对于您的router-link组件，您将不得不使用 javascript 字符串连接来添加chapter.id或使用计算属性来生成 url。

<router-link :to="'/chapter/' + chapter.id + '/quiz'">

或者，如果您使用的是 es6，则可以使用模板文字：

<router-link :to="`/chapter/${chapter.id}/quiz`">

推荐阅读