javascript - How to pass href value to template in Vue - Stack Overflow

admin管理员组

文章数量:1289528

This is the HTML.

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

And the main.js code is

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

But I'm getting error

[Vue warn]: failed to pile template: - invalid expression: v-bind:href="#about"

How to fix this?

This is the HTML.

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

And the main.js code is

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

But I'm getting error

[Vue warn]: failed to pile template: - invalid expression: v-bind:href="#about"

How to fix this?

• javascript
• vue.js

Share Improve this question Follow edited Dec 28, 2016 at 12:09 craig_h 32.7k77 gold badges6161 silver badges7070 bronze badges asked Dec 28, 2016 at 7:41 anoop chandrananoop chandran 1,50055 gold badges2525 silver badges4444 bronze badges 4

• I dont see any error here. Have to included all relevant code. – Saurabh Commented Dec 28, 2016 at 7:47
• @anoopchandran I am not sure at all if i intended this. very sorry for this mistake – Muhammad Omar ElShourbagy Commented Dec 28, 2016 at 8:09
• @Muhammad Omar ElShourbagy .. Its Okay..Thank you – anoop chandran Commented Dec 28, 2016 at 8:11
• @saurabh.. I tried your code.. it doesnt work. – anoop chandran Commented Dec 28, 2016 at 8:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I realise that you have solved this, but v-bind expects you to be pointing to an object in your parent class's data and you are trying to use a string literal, so Vue throws an error because it cannot find an object with that key.

You may also prefer to pass href as a prop to your ponent instead, so you end up with:

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

and then you can just do:

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

Here's the JSFiddle: https://jsfiddle/ov94tg5z/

Try to add more quotes)

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

Okay I managed to fix it.. like this.. HTML

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

And JS

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

本文标签： javascriptHow to pass href value to template in VueStack Overflow