如何将变量放在 vue js 2 的 href 中？

Question

当我运行这个 : {{nextPage}}

结果

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

但是当我像这样输入 href 时：

<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>

存在这样的错误:

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

如何解决错误？

Answer 1

v-bind表达式直接执行为JavaScript。因此，它们不需要插值。

你只是想要

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

见Template Syntax - Attributes

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

如何将变量放在 vue js 2 的 href 中？

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

javascript

vue.js

vuejs2