Question

我需要反转在Vue.JS项目中使用的JSON提要的顺序。

在其他框架中，reverse（）函数完成了这项工作。我已经尝试添加到Vue.JS脚本，但还没有欢乐。

我可以尝试其他语法的任何想法吗？

<script type="text/javascript">
new Vue({
    el: '#vueapp',
    data: {
        json: null
    },
    created: function () {
        var _this = this;
        $.getJSON('https://www.example.com/myfeed.json', function (json) {
            _this.json.reverse() = json;
        });
    }
});
</script>

因此，当页面加载JSON数据时，JSON中的最后一项（以下示例中的山侧房屋）将首先显示。

https://jsfiddle.net/5kt9jurc/3/

一些谷歌搜索似乎显示reverse（）不再适用于Vue2并且已被弃用。

Answer 1

我认为你想要的是这样的：

_this.json = json.reverse();

也就是说，假设json是已经解析过的json数组。否则，首先解析json字符串：

const array = JSON.parse(jsonString);
this.data = array.reverse();

您正在尝试为表达式的结果赋值，这没有多大意义（无法将右侧值赋值）。

Answer 2

您可以反转数组。看看我的fiddle。我用fetch替换了getJSON来使用promises。你也不需要做var _this = this; 看起来有点奇怪。因为在Vue.js中属性是反应性的，所以你可以设置一个值。

这是一段代码：

const app = new Vue({
  el: '#app',
  data: {   
    items: []
  },
  created: function() {
    fetch('https://api.jsonbin.io/b/5b02b2bbc83f6d4cc7349a7b')
      .then(resp => resp.json())
      .then(items => {        
        this.items = items.reverse()
      })
  }
});

使用reverse（）反转Vue.JS中的JSON数据

2 个答案: