单击按钮时在 Vue.js 中按名称排序列表

Question

我正在使用 Vue.js，我正在努力弄清楚如何在单击按钮时对列表进行排序。

实际上，我确实成功地使用orderedBeers 方法对列表进行了排序；当我单击按钮时，我可以在检查器中看到有序列表，但我无法更改 HTML 中的数据。

感谢每一个建议。提前谢谢你。

<template>
  <div>
    <div class=" main-conte" >
   
<transition-group name="fade" tag="div" id="container"  class=" row "  >
      <figure v-for="(value,index) in  toBeShown" id="page-wrap" :key="index" class="beer-container col-xs-6 col-sm-6 col-lg-4 col-xl-2"   >
         <a  >
    <img @click="goTodetail(value.id)" class="logo lazy img-responsive loaded" v-bind:src="getMissingImg(index)"/>
          <figcaption>
            <div class="beer-title">{{value.name}}</div>
            <div class="beer-availability"> {{value.tagline}}</div>
            <div class="learn-more">
              <h4 class="beer-info-title">Format</h4>
              <span class="serving-icons"></span>
              <div class="serving">
             <i v-if="value.abv >= 0 && value.abv <=6 " class="fas fa-wine-glass-alt"></i> 
             <i v-if="value.abv >= 6 && value.abv <=7" class="fas fa-glass-cheers"></i>
             <i v-if="value.abv >= 7 && value.abv <=100" class="fas fa-wine-bottle"></i>
             <span class="measure">{{value.abv}}</span>%
 </div>
 </div>
   </figcaption>
      </a>
     </figure>
     </transition-group>
<div class=prev-next>
  <button @click="orderedBeers">Click Me!</button>

<button class="prev" @click="prevPage" :disabled="currentPage==1">
<i class="fas fa-angle-double-left"></i></button>
      <button class="next"  @click="nextPage" :disabled="currentPage == totalPages">
<i class="fas fa-angle-double-right"></i>     </button>
</div>
</div>
       <div>
       </div>
    </div>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
import FadeTransition from "./fade-transition.vue";



export default {
  name: "home",
  components: {
    mdbView,
    mdbMask,
    FadeTransition
  },

  data() {
    return {
      items: [],
      currentPage: 1,

 };
  },
  computed: {
    //show more less products
  	toBeShown() {
    	return this.items.slice(0, this.currentPage * 5);
    },
    totalPages() {
      return Math.ceil( this.items.length / 4);
    },
 
 
   
  },
  mounted() {
    this.fetchData();
    
  },
  


  methods: {
    fetchData: function() {
      const myRequest = new Request("https://api.punkapi.com/v2/beers");

      fetch(myRequest)
        .then(response => {
          return response.json();
        })
        .then(data => {
          this.items = data;

          console.log(this.items);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getMissingImg(index) {
      return this.images[index];
    },

   	nextPage(){
      if(this.currentPage <  this.totalPages) this.currentPage++;
      // this.scrollToEnd();
    },
    prevPage(){
      this.currentPage = this.currentPage - 1 || 1;
      // this.scrollToEnd();
    },
      goTodetail(prodId) {
    let proId=prodId
    this.$router.push({name:'blog',params:{Pid:proId}})
    
      },

         orderedBeers: function () {
    console.log(_.orderBy(this.toBeShown, 'name', 'asc'));

    return _.orderBy(this.toBeShown, 'name', 'asc');

  },
  }
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

你快到了。您只需要使用另一个计算属性来对列表进行排序并在您的v-for 中使用它。

将模板修改为：

<figure v-for="(value,index) in toBeShownOrdered" id="page-wrap" :key="index" >

<button @click="orderByName = !orderByName">Click Me!</button>

组件：

// Add in data:
orderByName: false,

// Add in computed
toBeShownOrdered() {
  return this.orderByName ? _.orderBy(this.toBeShown, 'name', 'asc') : this.toBeShown;
}

参见此处：https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

Answer 2

您的数据源是计算属性toBeShown。如果您希望您的数据以排序的方式呈现，toBeShown 必须返回它。

在 orderedBeers 中，当您应该更改 toBeShown 以使用已排序的数据本身时，您正在按 toBeShown 对项目 returned 进行排序。

将orderedBeers 更改为更新data.items 以反映新的排序：

orderedBeers: function () {
  this.data.items = _.orderBy(this.data.items, 'name', 'asc')
}

这将对整个项目列表进行排序，而不仅仅是当前显示的页面。

或者

使用排序标志并将排序登录名移动到toBeShown内

data() {
 return {
  items: [],
  currentPage: 1,
  sorted: false
 }
}
...
orderedBeers: function () {
  this.sorted = true
}
...
toBeShown() {
    return this.sorted ? _.orderBy(this.data.items, 'name', 'asc').slice( 0, this.currentPage) : this.items.slice(0, this.currentPage * 5);
}

这也会对所有项目进行排序，但可以稍微更改代码以仅对当前显示的页面进行排序

toBeShown() {
    let items = this.items.slice(0, this.currentPage * 5)
    return this.sorted ? _.orderBy(items, 'name', 'asc') : items
}