How to put variable in a href on the vue js 2?

Question

When I run this : {{nextPage}}

The result

http://chelseashop.dev/search-result?page=2

But when I put in a href like this :

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            ...
            <li>
                <a :href="{{nextPage}}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        ...
    }
</script>

There exist error like this :

template syntax error - invalid expression: :href="{{nextPage}}"

How can I solve the error?

Answer 1

v-bind expressions are directly executed as JavaScript. As such, they do not require interpolation.

You simply want

<a :href="nextPage" aria-label="Next">

See Template Syntax - Attributes

Mustaches cannot be used inside HTML attributes, instead use a v-bind directive