vue.js - Vue router 中 router-link 的 to 怎么绑定对象数组中的属性?

问题描述

问 题

<template lang="pug">
  .header
    router-link(to="/")
      img.logo(src="../assets/logo.png")
    nav.nav-bar
      ul
        li(v-for="nav in navBars")
          router-link(to="{{ nav.navLink }}") {{ nav.navName }}
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      navBars: [
        { navName: '网站首页', navLink: '/' },
        { navName: '关于我们', navLink: '/' },
        { navName: '公司新闻', navLink: '/' },
        { navName: '服务案例', navLink: '/' },
        { navName: '招贤纳士', navLink: '/' },
      ],
    };
  },
};
</script>

router-link(to="{{ nav.navLink }}") {{ nav.navName }} 这里到底该怎么写才可以呢?

解决方案

v-bind:to="nav.navLink"

这篇关于vue.js - Vue router 中 router-link 的 to 怎么绑定对象数组中的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！