如何在vue

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 =＆＃34; #about＆＃34;

如何解决这个问题？

Answer 1

我意识到你已经解决了这个问题，但是v-bind希望你指向父类data中的一个对象而你正在尝试使用字符串文字，所以Vue会抛出一个错误，因为它无法找到具有该密钥的对象。

您可能还希望将href作为道具传递给您的组件，这样您最终会得到：

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/

Answer 2

好的，我设法解决了..就像这样.. HTML

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

和JS

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

Answer 3

尝试添加更多报价）

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