Vue中如何将对象键值对传入模板？解决链接跳转异常

你的问题出在<a>标签的:href绑定逻辑上：

a.nav-link.nav-item(type='button' :href='{value}') {{key}}

这里的{value}会被Vue解析成一个对象字面量（结构为{ value: "/目标路径" }），浏览器无法将对象识别为合法URL，因此会把它转码成[object%20Object]，最终导致跳转地址错误。

只需要把绑定内容改成直接使用value即可——因为v-for="(value, key) in myObject"里的value本身就是你定义好的字符串路径：

修正后的Pug模板：

.nav-container
  .nav-controller
    ul.navbar-nav
      li.btn(v-for="(value, key) in myObject" :key="value")
        a.nav-link.nav-item(type='button' :href='value') {{key}}

修改后，href会正确渲染为对应的路径（比如/、/programming等），链接跳转即可恢复正常。

内容的提问来源于stack exchange，提问作者Alexander WJ