Question

我正在将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” 但在渲染期间引用。确保此属性是在data选项中或对于基于类的组件，通过初始化属性。看到： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

我认为这可能会导致此错误，直到响应中带有http get请求为止。为了解决这个问题，我还尝试使用静态json数据，但仍然显示此错误。

有人可以帮我解决这个问题吗？

Answer 1

尝试在v-for中使用slice（）。reverse（）。

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

带过滤器的v-for给出属性或方法未定义的错误

1 个答案: