Vue.js 動態href

Question

所以，我試圖在一個可以在 App.vue 文件中編輯的Vue組件中創建一個動態href（無需在組件文件中編輯它）。

就像你在文件中看到的name1、name2、name3和name4一樣

<div class="navigationdrawer">
    <div id="mySidenav" class="sidenav">
        <a href="#">{{ name1 }}</a>
        <a href="#">{{ name2 }}</a>
        <a href="#">{{ name3 }}</a>
        <a href="#">{{ name4 }}</a>
    </div>
</div>

<script>
export default {
        name: 'NavigationDrawer',
        props: {
            msg: String,
            name1: String,
            name2: String,
            name3: String,
            name4: String,
            link1: String,
            link2: String,
            link3: String,
            link4: String
        }
</script>

當我放<a href= {{ link1 }}>{{ name1 }}</a>它適用於 {{ name1 }} 但 {{ link1 }} 部分給出錯誤。

Answer 1

不能在 HTML 屬性中使用胡須。 相反，使用v-bind指令：

<a v-bind:href="link1">{{ name1 }}</a>

或速記

<a :href="link1">{{ name1 }}</a>

另外，我建議使用一組鏈接來使組件更具動態性。

<div class="navigationdrawer">
  <div id="mySidenav" class="sidenav">
    <a :href="link.href" v-for="link in links" :key="link.href">
      {{ link.name }}
    </a>
  </div>
</div>

鏈接：

[
 { name: 'Name 1', href: 'http://name1.com' },
 { name: 'Name 2', href: 'http://name2.com' },
]