v-for with filter 给出未定义的属性或方法的错误答案

【问题标题】：v-for with filter gives error of property or method not definedv-for with filter 给出未定义的属性或方法的错误
【发布时间】：2019-08-11 01:02:44
【问题描述】：

我将 Vue2 与 Vuex 一起使用。我有来自https://jsonplaceholder.typicode.com/posts 的帖子列表我想按降序显示它。为此，我在 main.js 中创建了一个名为“desc”的过滤器，并像这样应用于我的组件 posts.vue。

<li v-for="post in posts | desc" :key="post.id">

这是我的 main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'

Vue.config.productionTip = false

Vue.filter('desc', function(arr){
  if(arr) return arr.reverse();
});

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

它给了我以下错误：

[Vue 警告]：实例上未定义属性或方法“desc” 但在渲染期间引用。确保此属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我认为在 http get 请求附带响应之前可能会导致此错误。为了解决这个问题，我也尝试使用静态 json 数据，但仍然显示此错误。

谁能帮我解决这个问题？

【问题讨论】：

来自文档Vue.js allows you to define filters that can be used to apply common text formatting.。使用计算或方法得到反转数组

标签： vue.js vuex

【解决方案1】：

尝试在 v-for 中使用 slice().reverse()。

<li v-for="post in posts.slice().reverse()">
    //do something here
</li>

【讨论】：