[Vuejs]-Laravel backend to Vue not displaying correctly sorted data

0👍

When data is sent via JSON order will be random. What you need to do is create a computed property in vuejs which can be called “sortedCountryList” and do your sorting there. Then you can use this computed property wherever you need to output sorted list.

 <script>

  export default {

    mounted: function() { 
           this.read();
    },

    data() {
      return {
        countryList: [],
      }
    },
    methods: {

      read() {
        window.axios.get('/readCountry')
            .then(response => this.countryList = response.data)
      },
    },
    computed: {
            sortedCountryList: function() {
               return this.countryList.sort(function (a, b) {
                   return b.name - a.name;
               });

            },
    },
    components: {

    },
  }
</script>

0👍

This Solved my issue.

  computed: {
    sortedArray: function() {
      function compare(a, b) {
        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }

      return this.countryList.sort(compare);
    }
  }

Leave a comment