如何在Vue中将href值传递到模板

Question

这是HTML。

<navlink v-bind:href="#about">About</navlink>

主要的代码在 main.js 文件中

Vue.component('navlink', {
    template: '<li class="item"><a><slot></slot></a></li>'
});

但是我遇到了错误

[Vue 警告]: 编译模板失败: - 无效表达式: v-bind:href="#about"

如何修复这个问题？

- anoop chandran

---

我在这里看不到任何错误（http://jsfiddle.net/k9v9rxma/）。必须包含所有相关的代码。 - Saurabh

@anoopchandran 我真的不确定我是否有意这样做。非常抱歉犯了这个错误。 - Muhammad Omar ElShourbagy

@Muhammad Omar ElShourbagy 。。没关系。。谢谢你 - anoop chandran

@saurabh.. 我试了你的代码，它不起作用。 - anoop chandran

Answer 1

我知道您已经解决了这个问题，但是v-bind希望您指向父类的data中的一个对象，而您正在尝试使用字符串文字，因此Vue会抛出错误，因为它找不到具有该键的对象。

您可能还喜欢将href作为组件的一个prop传递，这样您就可以得到：

Vue.component('navlink', {
    template: '<li class="item"><a :href="href"><slot></slot></a></li>',
    props: ['href']
});

然后你可以这样做：

<navlink href="#about">About</navlink>

这是JSFiddle链接：https://jsfiddle.net/ov94tg5z/

- craig_h

Answer 2

尝试添加更多引号)

<navlink v-bind:href="'#about'">About</navlink>

- Alexander Mamutov

Answer 3

好的，我已经成功解决了它...像这样... HTML

<navlink href="#about">About</navlink>

还有JS

Vue.component('navlink', {
template: '<a class="item"><slot></slot></a>'
});

- anoop chandran

---

只是出于好奇，href会自动绑定到a标签上吗？顺便说一下，我是vuejs的新手。 - PunNeng

似乎是这样的... 我尝试了 Vue.component('navlink', { template: '<li class="item"><a><slot></slot></a></li>' }); 然后生成的 HTML 是 <li href="#about"><a class="item">关于我们</a></li>。 - anoop chandran