VueJS - 在 href 属性中使用 mustache 模板字符串

Question

在 vue 的上下文中，如何在 href 属性中添加小胡子？

这些都是我发现并尝试在我的代码中实现的所有答案

Mustache inside of href

How to pass a value from Vue data to href?

https://www.reddit.com/r/vuejs/comments/4ws0px/why_using_vbindhref_rather_than_a_href_string_a/

我现在的代码示例是：

...
<ul>
        <li v-for="menuItems in MenuItems" class="nav-item">
          <a
            class="nav-link"
            v-bind:href="{{ & menuItems.url}}"
            aria-label=“blah”
            >{{ menuItems.text }}</a
          >
        </li>
      </ul>
...
export default {
  name: 'Nav',
  data: {
    menuItems: [
      {text: 'Item 1', url: '/item-1'},
      {text: 'Item 2', url: '/item-2'},
      {text: 'Item 3', url: '/item-3'},
      {text: 'Item 4', url: '/item-4'}
    ]
  }
}
...

我试过了：

1.

      <a
        class="nav-link"
        v-bind:href="{{ & menuItems.url}}"
        aria-label="blah"
        >{{ menuItems.text }}</a
      >

1.   <a
       class="nav-link"
       v-bind:href="menuItems.url"
       aria-label="blah"
       >{{ menuItems.text }}</a
     >
   

2.   <a
       class="nav-link"
       v-bind:href="/menuItems.url/"
       aria-label="blah"
       >{{ menuItems.text }}</a
     >
   

我要么得到：

编译模板时出错：

无效的表达式：Unexpected token { in

{{ & menuItems.url}}

原始表达式：v-bind:href="{{ & menuItems.url}}"

或者一个完全空的<ul>

我做错了什么？这是如何工作的？

Answer 1

假设您使用的是当前的 VueJS 版本，您链接的所有链接都与这种情况无关。 VueJS 1 使用了在 html 属性中使用双花括号，但是在 VueJS 2 中它被称为 v-bind 的东西所取代。 V-bind 可以用在属性中，有以下两种功能等效的方式：

<a v-bind:href="url"></a>

和

<a :href="url"></a>

带有双花括号的 mustache 语法在模板中仍然有效，但在属性中无效。

Answer 2

绑定href的正确变体是

v-bind:href="menuItem.url"

但你的问题可能是因为

v-for="menuItems in MenuItems"

您正在尝试枚举MenuItems 属性，但您在组件中没有这样的属性，您有menuItems。试试这个

<li v-for="menuItem in menuItems">
    <a :href="menuItem.url">{{ menuItem.text }}</a>
</li>

你也可以试试改

data: {
    menuItems: [
      {text: 'Item 1', url: '/item-1'},
      {text: 'Item 2', url: '/item-2'},
      {text: 'Item 3', url: '/item-3'},
      {text: 'Item 4', url: '/item-4'}
    ]
  }

进入

data: function () {
    return {
        menuItems: [
          {text: 'Item 1', url: '/item-1'},
          {text: 'Item 2', url: '/item-2'},
          {text: 'Item 3', url: '/item-3'},
          {text: 'Item 4', url: '/item-4'}
        ]
    }
  }

Answer 3

您的 v-for 中有错字，您需要 menuItems，降低 m

  <ul>
    <li v-for="menuItem in menuItems" class="nav-item">
      <a
        class="nav-link"
        v-bind:href="menuItem.url"
        aria-label=“blah”
        >{{ menuItem.text }}</a
      >
    </li>
  </ul>

也将数据改成方法

data () {
  return {
   ....
   }
}

Answer 4

以下代码正在运行。代码笔：https://codepen.io/anon/pen/bZQZdK

<ul>
        <li v-for="menuItem in menuItems" class="nav-item">
          <a class="nav-link"
            v-bind:href="menuItem.url"
            aria-label=“blah”>{{ menuItem.text }}</a>
        </li>
      </ul>

Answer 5

我过去使用 nunjucks 遇到过这个问题。我的解决方案是从 href 中删除 v-bind：

<li v-for="menuItems in MenuItems" class="nav-item">
      <a
        class="nav-link"
        href="{{ & menuItems.url}}"
        aria-label=“blah”
        >{{ menuItems.text }}</a
      >
    </li>

Answer 6

就我而言，这对我有用：

v-bind:href="/post/ + post.slug"

我有一个 laravel 路由并使用了这个。