javascript - vue-router 动态生成v-link列表的问题！

Question

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}
                })
            }
        })
    }
}

首先

模板文件长这样子

p.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神秘失效的

<p class="col-sm-3">
<a class="btn btn-secondary btn-block" >xxx</a>
<a class="btn btn-secondary btn-block" >aaa</a>
</p>

于是我又试了下

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" data-v-link="{ path:'{{item.route}}' }")="{{item.name}}"

<p class="col-sm-3">
<a class="btn btn-secondary btn-block" data-v-link="{ path:'/chart-tendency' }">xxx</a>
<a class="btn btn-secondary btn-block" data-v-link="{ path:'/chart-mesh' }">aaa</a>
</p>

说明v-link确实是被传进去了的

然后我又

p.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}}"

<p class="col-sm-3">
<a class="btn btn-secondary btn-block" href="{ path:'haha' }">why</a>
<a class="btn btn-secondary btn-block" >xxx</a>
<a class="btn btn-secondary btn-block" >aaa</a>
</p>

直接填写v-link是有效果的

最后我终于找到了一个透明胶勉强解决

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" href="#!{{item.route}}")="{{item.name}}"

<p class="col-sm-3">
<a class="btn btn-secondary btn-block" href="#!/chart-tendency">xxx</a>
<a class="btn btn-secondary btn-block" href="#!/chart-mesh">aaa</a>
</p>

又找到了个透明胶，这样可以用v-link提供的一些属性

let routerButtons = routerObjects.reduce((previousValue, obj)=>{
    return previousValue+`<a class="btn btn-secondary btn-block" v-link='${JSON.stringify(obj)}'>${obj.name}</a>`
},"")

class Sidebar extends VueComponent{
    constructor(options){
        super(options,{
            template: `<p class="col-sm-3">
                ${routerButtons}
            </p>`
            , data:{

            }
        })
    }
}

这样肯定不是最好的方法，只是勉强解决了。

于是来问下大家

问题解决

看来特殊的属性是不能用{{}}的

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" v-link="item" v-text="item.name")

Answer 1

既然你的vue-router配置了name， vue-router 使用 v-link="{name:'xx'}" 也可以 。

<a v-for="item in items" v-link="item" v-text="item.name"></a>