如何在点击时调用方法，而不是在 Vuejs 中调用 v-for

Question

我正在尝试根据每个项目的最高到最低评分来显示这个对象数组。使用 v-for 上的方法可以正常工作，但我真的很想按照对象最初出现的顺序显示对象列表，然后调用一个按最高到最低等级显示它们的函数。

当我将它设置为 v-for="item in items" 然后尝试在按钮上调用该方法时，例如 @click="rated(items)"，没有任何反应。为什么我最初可以在附加方法的 v-for 上显示数组，但不能在点击事件上显示？

const items = [
  {
    name: "Bert",
    rating: 2.25
  },
  {
    name: "Ernie",
    rating: 4.6
  },
  {
    name: "Elmo",
    rating: 8.75
  },
  {
    name: "Rosita",
    rating: 2.75
  },
  {
    name: "Abby",
    rating: 9.5
  },
  {
    name: "Cookie Monster",
    rating: 5.75
  },
  {
    name: "Oscar",
    rating: 6.75
  }
]

new Vue({
  el: "#app",
  data: {
    items: items
  },
  methods: {
    rated: function(items) {
      return items.slice().sort(function(a, b) {
        return b.rating - a.rating;
      });
    },
    sortByRating: function(items) {
      return items.slice().sort(function(a, b) {
        return b.rating - a.rating;
      });
    }
  }
});

#app {
  display: flex;
  flex-flow: row wrap;
  margin-top: 3rem;
}

.item {
  flex: 1;
  margin: .5rem;
  background: #eee;
  box-shadow: 0px 2px 4px rgba(0,0,0,.5);
  padding: 1rem;
  min-width: 20vw;
}

.toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: .5rem 1rem;
  background: DarkOrchid;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item in rated(items)" 
       class="item">
  <p>{{item.name}}</p>
  <p>{{item.rating}}</p>
  </div>
</div>

Answer 1

尝试为方法返回的结果重写数组，像这样。

@click="items = rated(items)

而且，在 v-for 中你可以继续使用物品。