Home>

I'm touching vue for the first time, so I'm sorry if it's a rudimentary mistake.

I want to create something like a ranking table that is displayed in order of likes (descending order).

<template>
  
     Some title 
  <table>
    <thead>
    <tr>
    <th>No.</th>
    <th>Number of likes</th>
    <th>image</th>
    <th>name</th>
    <th>Information</th>
    <th>Type</th>
    </tr>
    </header>
      <tbody>
        <tr v-for = "item in items": key = "item.no">
          <td>{{item.no}}</td>
          <td>{{item.like}}</td>
          <td></td>
          <td>{{item.name}}</td>
          <td>{{item.info}}</td>
          <td></td>
          <button: disabled = "isPush" @ click = "item.like ++;isPush = true;">Voting</button>
        </tr>
      </tbody>
  </table>
  
</template>
<script>
export default {
  data () {
    return {
      items: [
        {
          no: 1,
          like: 7, // I want to create a ranking function for the numbers here
          img: require ('@/assets/images/items/hogehoge.png'),
          name:'foo',
          info:'aaa',
          kind: require ('@/assets/images/aaa/bbb.png')
          }, // Things like the above follow below
      ],,
      isPush: false, // I try not to press it more than once
    }
  },
  computed: {
    sortedItems () {
      return this.items.slice (). sort ((a, b) =>{
      if (a [this.like]<b [this.like]) return -1
      if (a [this.like]>b [this.like]) return 1
      return 0
      });
    }
}
}
</script>

I will only post where I think it is a problem.
With this, it is not displayed in the order of likes.
I would appreciate it if you could teach me how to display them in the order of likes (descending order).

  • Answer # 1

    sortedItems is not called.


    To

    Change to.

    Also in sortedItemsthis.likeI don't know what is referring to.
    Maybe do the following:

    sortedItems () {
       return this.items.slice (). sort ((a, b) =>{
          if (a.like>b.like) return -1
          if (a.like<b.like) return 1
          return 0
       });
    }

    reference
    https://jsfiddle.net/nb4kc6xu/