Question

您如何在vue上下文的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
      >

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

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

我要么得到：

错误编译模板：

无效的表达式：意外的令牌{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>

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

Answer 2

您的 v-for 中有一个错字，您需要menuItem（低m）

df['NumSurvived']=df.groupby('Surname')['Survived'].transform(lambda x: x.eq(1).sum())

也将数据更改为方法

   PassengerId  Survived    Surname  NumSurvived
0            1         0     Braund            0
1            2         1    Cumings            2
2            3         1  Heikkinen            1
3            4         1   Futrelle            1
4            5         0     Braund            0
5            6         0      Moran            0
6            7         0   Futrelle            1
7            8         0     Braund            0
8            9         1    Cumings            2

Answer 3

绑定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 4

以下代码有效。 Codepen：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路线，并使用了它。

VueJS-在href属性内使用小胡子模板字符串

6 个答案: