Vue.js中使用reverse()反转JSON数据失败，求Vue2替代方案

嘿，我来帮你搞定这个反转数组的问题～首先得纠正几个小误区，然后给你几个可行的方案：

先说说你代码里的问题 #

你原来的代码里这一行完全写反啦：

_this.json.reverse() = json;

首先，_this.json一开始是null，根本没法调用reverse()方法；其次，赋值的逻辑搞反了——应该是把反转后的数组赋值给_this.json，而不是反过来。另外，reverse()是JavaScript原生数组的方法，Vue 2并没有弃用它哦，只是你用错了方式😉

可行的解决方案 #

方案1：获取数据后反转再赋值 #

拿到JSON数据后，先反转数组（如果不想修改原数据，就先复制一份再反转），然后赋值给Vue的data属性：

new Vue({
  el: '#vueapp',
  data: {
    json: null
  },
  created: function () {
    var _this = this;
    $.getJSON('https://www.example.com/myfeed.json', function (json) {
      // 方式1：直接反转原数组并赋值（会修改原json数组）
      _this.json = json.reverse();
      
      // 方式2：复制数组后再反转（不修改原数组，推荐）
      // _this.json = json.slice().reverse();
    });
  }
});

slice()方法会创建一个原数组的浅拷贝，再调用reverse()就不会影响原始的数据源啦。

方案2：用计算属性实现（不修改原数据源） #

如果不想改变data里的原始数组，只是在页面展示时反转顺序，推荐用计算属性，它会自动响应数据变化：

new Vue({
  el: '#vueapp',
  data: {
    json: null
  },
  created: function () {
    var _this = this;
    $.getJSON('https://www.example.com/myfeed.json', function (json) {
      _this.json = json;
    });
  },
  computed: {
    reversedJson() {
      // 当json不为null时，复制并反转；否则返回空数组
      return this.json ? this.json.slice().reverse() : [];
    }
  }
});

然后在模板里直接使用reversedJson来渲染数据就行，比如：

<div v-for="item in reversedJson" :key="item.id">{{ item.content }}</div>

这样就能实现你想要的效果——让JSON里的最后一项（比如山间房屋）在页面加载时最先显示啦。

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