关于vue.js：VueJS-在href属性内使用小胡子模板字符串

VueJS - using mustache template strings inside href attribute

如何在vue上下文的href属性内插入小胡子？

这些都是我一直试图在我的代码中实现的所有答案

在href

内的小胡子

如何将Vue数据中的值传递给href？

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

我的代码示例现在是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

...

<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
2
3
4
5
6

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

1
2
3
4
5
6

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

1
2
3
4
5
6

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

我要么得到：

Errors compiling template:

invalid expression: Unexpected token { in

1
{{ & menuItems.url}}

Raw expression: v-bind:href="{{ & menuItems.url}}"

或完全空的
<DDPB1>

我在做什么错？这是怎么工作的？

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

和

带有双花括号的小胡子语法仍可在模板中使用，但不能在属性中使用。

相关讨论

绑定href的正确变体是

1	v-bind:href="menuItem.url"

但是您的问题可能是由于

1	v-for="menuItems in MenuItems"

您正在尝试枚举MenuItems属性，但是在组件中没有此类属性，您具有MenuItems。试试这个

1
2
3
4

<li v-for="menuItem in menuItems">
{{ menuItem.text }}

</li>

您也可以尝试更改

1
2
3
4
5
6
7
8

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
2
3
4
5
6
7
8
9
10

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'}
]
}
}

对于我来说，这对我有效：

v-bind：href =" / post / post.slug"

我有一条laravel路线，并使用了它。