Vue onclick sort child component in parent component

Question

I'm using Vue cli and I have an array of users that I display as a profile card in template that I would like to sort by name. I'm using Vuex to store data.

In the child component I have in my template:

<div class="outside"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
    <div class="stay">  <p class="n"> {{ item.name }}</p> </div>

and I'm getting the Vuex data:

computed: {
    arrays () {
      return this.$store.state.arrays
    },
}

and my array contains:

 arrays: [
      { name: 'Peter'},
      { name: 'Beth'},
      { name: 'Daniel'},
    ]

I used a function in the child component:

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.arrays.sort(compare);
  }
  },

and changed the template to:

<div class="outside"  v-for="(item, index) in sortedArrays" :key="item.id" v-bind:id="item.name">

But I'd like a way to do this onclick (in the parent), instead of always displaying it in order.

In my parent component I have:

<div class="begin">
<div class="b">Sort By:
                
 <select name="sort" class="sort" >
  <option value="name" @click="sortArrays()">Name</option>
 </select>
 </div>

<childComponent></childComponent>

</div>

I would like a sortArrays function I can use in the parent to display the user profile card in alphabetical order when I click on sort by name.

Thanks so much!

Answer 1

You can send the array from parent to child in props

Using Props

Parent

.html

<div class="begin">
  <div class="b">Sort By:
            
     <select name="sort" class="sort" >
        <option value="name" @click="sortArray()">Name</option>
     </select>
  </div>

  <childComponent :arrays=arrays></childComponent>

</div>

.Vue

new Vue({
  data() {
    return {
      arrays: this.$store.state.arrays
    }
  },
  methods: {
    sortArray: function() {
       this.array.sort((a, b) => return a.name < b.name ? -1 : 1)
    }
  }
})

Child

.Vue

new Vue({
   props: ['arrays']
})

Using Sort flag

Child component will accept a sort prop from parent. When Sort is clicked on parent it will be true and sent to child. On Prop Change, the child will sort and display the sorted array.

Child

.Vue

new Vue({
  props: ['isSorted],
  watch: {
    isSorted: function(oldval, newVal){
      if(newVal) {
        // Do the sorting
      }
    }
  }
})

Parent

.Vue

 new Vue({ data(){ return { isSorted: false }}, methods: { sortArrays: { this.isSorted = true; } }})

.html

  <child-component :isSorted=isSorted></child-component>

Update

The change event can be binded to select.

<select name="sort" class="sort" @change="sortArray" v-model="filter">
    <option value="name">Name</option>
 </select>

In Vue

props: { filter: ''},
methods: { sortArray: function() { if(this.filter === 'name') // Do the sorting }}

Answer 2

Add a showSorted in your data with a bool value:

data(){
   return {
    showSorted: false
   }
 }

then edit your computed to use showSorted:

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

and then onClick you just have to set this.showSorted to true;

Answer 3

Move the array, sortedArray computer properties to the parent component And pass the array you want to be displayed to the child component as prop

handle all the logic in the parent component, here is a code snippet below that shows the basic operation. Hope you can make changes as you need.

var ChildComponent = {
  template: "<div>{{ sortedArray }}</div>",
  props: {
    sortedArray: {
      type: Array,
      default: () => [],
    }
  }
}

var app = new Vue({
  el: '#app',
  components: { ChildComponent },
  data: {
     sortBy: "",
     array: [
      { name: 'Peter', age: 24},
      { name: 'Beth', age: 15},
      { name: 'Daniel', age: 30},
    ]
  },
  computed: {
    displayArray() {
      // declare the compare functions
      // for name
      function cmpName(a, b) {
        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }
      // for age
      function cmpAge(a, b) {
        if (a.age < b.age)
          return -1;
        if (a.age > b.age)
          return 1;
        return 0;
      }
      
      if (this.sortBy === "name") return this.array.sort(cmpName);
      else if (this.sortBy === "age") return this.array.sort(cmpAge);
      else return this.array;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="sortBy">
    <option value="">Please select a value</option>
    <option value="name">name</option>
    <option value="age">age</option>
  </select>
  <child-component :sorted-array="displayArray" />
</div>