关于网友提出的“(vue.js)vue-router 动态生成v-link列表的问题！”问题疑问，本网通过在网上对“(vue.js)vue-router 动态生成v-link列表的问题！”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题：(vue.js)vue-router 动态生成v-link列表的问题！
描述:github上也提了个issue：https://github.com/vuejs/vue-router/issues/319
下面请听我娓娓道来，首先我有一个萌萌哒Vue侧边栏组件
class Sidebar extends VueComponent{
constructor(options){
super(options,{
template: require("./index.jade")
, data:{
items:Object.keys(router).map(key=>{
return {route:key,name:router[key].name}
})
}
})
}
}
首先
模板文件长这样子
div.col-sm-3
template( v-for="item in items" )
a(class="btn btn-secondary btn-block" v-link="{ path:'{{item.route}}' }")="{{item.name}}"
我得到的结果,v-link神秘失效的
于是我又试了下
div.col-sm-3
template( v-for="item in items" )
a(class="btn btn-secondary btn-block" data-v-link="{ path:'{{item.route}}' }")="{{item.name}}"
说明v-link确实是被传进去了的
然后我又
div.col-sm-3
a(class="btn btn-secondary btn-block" v-link="{ path:'haha' }")="why!"
template( v-for="item in items" )
a(class="btn btn-secondary btn-block" v-link="{ path:'{{item.route}}' }")="{{item.name}}"
直接填写v-link是有效果的
最后我终于找到了一个透明胶勉强解决
div.col-sm-3
template( v-for="item in items" )
a(class="btn btn-secondary btn-block" href="#!{{item.route}}")="{{item.name}}"
又找到了个透明胶，这样可以用v-link提供的一些属性
let routerButtons = routerObjects.reduce((previousValue, obj)=>{
return previousValue+`${obj.name}`
},"")
class Sidebar extends VueComponent{
constructor(options){
super(options,{
template: `
${routerButtons}
`
, data:{
}
})
}
}
这样肯定不是最好的方法，只是勉强解决了。
于是来问下大家
问题解决
看来特殊的属性是不能用{{}}的
div.col-sm-3
template( v-for="item in items" )
a(class="btn btn-secondary btn-block" v-link="item" v-text="item.name")
解决方案1:既然你的vue-router配置了name， vue-router 使用 v-link="{name:'xx'}" 也可以 。
以上介绍了“(vue.js)vue-router 动态生成v-link列表的问题！”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/1163316.html
