Question 248950 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Sorting array in Computed property in Vue.JS is not working

I am currently practicing in Vue.js and I have encountered a problem regarding the sorting of arrays in Vue.js. The sort(a-b) should perform an ascending order which is the least alphabet/value first but the array is still the same. There is no changes of order. I have a function inside the computed property and it doesn’t work. I am stucked here for hours now. Here is my code below,

<template>
  <div>
    <Navbar/>
    <div class="container p-4">
      <h1>{{ title }}</h1><br />
      <br>
      <Button/>
      <Table :people="sortedPeople"/>
    </div>
    <Modal @submit="submitPerson" />
  </div>
</template>
<script>
  import Navbar from './components/Navbar.vue'
  import Button from './components/Button'
  import Table from './components/Table.vue'
  import Modal from './components/Modal.vue'

  export default {
    name: 'App',
    data(){
      return {
        title: 'People',
        name:'Rename This',
        people: [
          {
            fname: 'Ab',
            lname: 'Zigzag'
          },
          {
            fname: 'Al',
            lname: 'Alabasta'
          }
        ],
      }
    },
    components: { Button, Navbar, Table, Modal },
    computed:{
      sortedPeople(){
        return this.people.sort((a, b) => a.lname - b.lname)
      }
    },
    methods: {
      submitPerson(person) {
        if(person.first_name && person.last_name) {
          this.people.push({ fname: person.first_name, lname: person.last_name })
        }
      }
    }
  }
</script>

Here is my table component,

<template>
    <table class="table table-sm table-responsive table-hover">
        <thead>
            <tr>
                <th>Number</th>
                <th>Names</th>
                <th>Score</th>
            </tr>
        </thead>
        <tbody v-for="(person, i) in people">
            <tr>
                <td>{{  i+=1 }}</td>
                <td>{{ person.fname+" "+person.lname }}</td>
                <td>{{ Math.floor(Math.random() * 100) }}/100</td>
            </tr>
        </tbody>
    </table>
</template>
<script>
    export default {
        name: "Table",
        props: { people: Array },
    }
</script>

What is the correct way of using computed property? Thanks in advance.

Tags:

3

Answers


  1. 0

    Use localeCompare() to compare strings, i.e. sort((a, b) => a.lname.localeCompare(b.lname))

    Login or Signup to reply.
  2. 0

    To sort an array of strings in JavaScript, you should use the localeCompare method:

    computed: {
  sortedPeople() {
    return this.people.slice().sort((a, b) => a.lname.localeCompare(b.lname));
  }
}

    When comparing strings with sort, the subtraction operation a.lname - b.lname will result in NaN

    Also, note the use of slice(). Without slice(), the sort method would sort the people array in place, modifying the original array.

    Login or Signup to reply.
  3. 0

    You can check all conditions normally in your comparator function.

    this.people.sort((a,b) => {
  if (a.lname < b.lname) return -1
  if (a.lname > b.lname) return 1
  return 0
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search