Vue.js中href使用JS表达式实现上下篇导航的问题及解决

你遇到的问题其实是被自增（++）和自减（--）运算符的特性坑到了：

• post.id-- 会先返回当前的post.id值，再把原始的post.id减1
• post.id++ 会先返回当前的post.id值，再把原始的post.id加1

更关键的是，这两个运算符会直接修改posts数组里原始数据的id值，再加上Vue循环渲染时会多次执行这些表达式，就导致链接的目标id完全不符合预期（比如下一篇跳到id减2的位置）。

修复方法 #

别用自增自减运算符，直接用普通的加法/减法表达式计算目标id就行——这样不会修改原始数据，结果也完全符合你的需求：

修改组件模板里的链接部分：

<a :href="'#' + (post.id - 1)">Previous Entry</a>
<a :href="'#' + (post.id + 1)">Next Entry</a>

完整的组件代码修正后如下：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post" v-bind:id="post.id">
      <h1>{{ post.title }}</h1>
      <div v-html="post.body"></div>
      <a :href="'#' + (post.id - 1)">Previous Entry</a>
      <a :href="'#' + (post.id + 1)">Next Entry</a>
    </div>
  `
})

补充说明 #

正如你后来发现的，这种写法完美解决了问题——我们只是基于当前post.id计算出上一篇/下一篇的id，不会改动原始数据，也就避免了运算符副作用带来的奇怪问题。感谢blex的提示！

内容的提问来源于stack exchange，提问作者NoobCoder