6 javascript vuejs2 nuxt.js vuetify.js
在 Nuxt 和 Vuetify 应用程序中,我有一系列按钮:
<v-btn
dark
color="orange"
href="className/studentName"
nuxt
>
<v-icon large left>favorite</v-icon>
studentName
</v-btn>
Run Code Online (Sandbox Code Playgroud)
我想重构这段代码,因为我知道我从路由中获得了 className:$route.params.className
并且我从一个普通的 JavaScript 数组中获得了 studentName。
当我输入 href={{$route.params.className}}/studentName 时,出现错误:
请改用 v-bind 或冒号简写。例如,代替 ,使用 。
当我这样做时:
:href="$route.params.className/studentName"
Run Code Online (Sandbox Code Playgroud)
我收到此错误:
无效的道具:道具“href”的类型检查失败。预期字符串,对象,得到数字。
那么如何在href
不硬写的情况下正确定义我的道具className
(我的意思是我想使用$route.params.className
它来重构我的具有多个按钮的代码?
小智 22
你应该使用 to="studentName" nuxt
例如:
<v-toolbar-items class="hidden-sm-and">
<v-btn flat to="/home" nuxt> Home </v-btn>
<v-btn flat to="/contact" nuxt> Contact </v-btn>
<v-btn flat to="/login" nuxt> Login </v-btn>
</v-toolbar-items>
Run Code Online (Sandbox Code Playgroud)
您可以使用如下所示的语句来评估路由参数值并附加字符串/studentName
:
:href="$route.params.className + '/studentName'"
Run Code Online (Sandbox Code Playgroud)
希望这有帮助!