18_Vue list sorting

Sort the list

demand analysis

For the previous case, list filtering, we will upgrade it
Add three buttons, ascending, descending, original order by age
Link to previous case
According to the previous case, this time we use the method of calculating properties to implement

accomplish

step-by-step analysis

html

First we need to build the page elements
This page is composed of an input box input, 3 buttons, a ul li tag combination
The content of the button group is different in the middle. We can set a simple array in the data and render the three buttons through v-for
Next, set a click event click for the three buttons. For this click event, we set a simple js expression to change the default index value in data.
Then it's rendering ul - li, and the rendering value is the computed property filterPersons

    <!-- Create a container -->
    <div class="app">
        <!-- fuzzy query -->
        <input type="text" v-model="keyWords">
        <!-- button group -->
        <button v-for="(item,index) in btnNames" @click="sortType = index">{{item}}</button>
        <!-- List rendering -->
        <ul>
            <li v-for="item in filterPersons" :key="item.id">
                {{item.name}} - {{item.age}} - {{item.sex}}
            </li>
        </ul>
    </div>

data

      data: {
        btnNames:["ascending age","descending age","original order"],
        sortType: 2, // original permutation index value
        keyWords: "",
        persons: [ // original data, unchangeable
            {id: 1,name: 'Ma Dongmei',age: 38,sex: "Female"},
            {id: 2,name: "Zhou Dongyu",age: 36,sex: "Female"},
            {id: 3,name: "Jay Chou",age: 39,sex: "male"},
            {id: 4,name: "Wen Zhaolun",age: 41,sex: "male"},
        ],
        
      },

sort

It is an api for sorting arrays. This api can sort the items in the reverse order of the array according to the requirements.

Reference link

computed property

The purpose of the computed property is to perform the computation of the dependency property, but it is not only that, it can also detect the change of the dependent data and update it
There are two important configuration items in computed
- get: commonly used, very important
  1. When the computed property is accessed in the page, the get method is called;
  2. When the property on which the computed property depends is modified, the get method is called
  3. The get method requires a return value, which represents the new computed property
- set: rarely used, but important
  - Called when the computed property itself is modified
  - When called, the value of the dependency property needs to be modified synchronously
Looking at our case, do we need to modify the computed property directly? unnecessary
When are computed properties modified? When the input is entered, when the button is clicked
Then we only need to configure the get configuration item of the computed property.
The get configuration item needs to return the value. This is not in a hurry, but it cannot directly return the fuzzy query result as before. We also need to sort it.

const vm = new Vue({
      el: '.app',
      data: {
        name: 'wavesbright',
        btnNames:["ascending age","descending age","original order"],
        sortType: 2, // original permutation index value
        keyWords: "",
        persons: [ // original data, unchangeable
            {id: 1,name: 'Ma Dongmei',age: 38,sex: "Female"},
            {id: 2,name: "Zhou Dongyu",age: 36,sex: "Female"},
            {id: 3,name: "Jay Chou",age: 39,sex: "male"},
            {id: 4,name: "Wen Zhaolun",age: 41,sex: "male"},
        ],
        
      },
      methods: {
        
      },
      computed:{ // Computed property configuration item
        filterPersons(){
            // Fuzzy query on input content
            let arr = this.persons.filter(item=>{
                // The internal judgment condition is whether the keyword entered by the keyboard has an index value in the name attribute of the item, and whether it exists
                return item.name.indexOf(this.keyWords) != -1;
            })

            // Determine if sorting is required
            if(this.sortType != 2){
                // a is the previous item (index = 0); b is the next item (index = 1)
                // a-b stands for order, b-a stands for reverse order
                // Both a and b are loop items in the array, that is, the objects in the array
                arr.sort((a,b)=>{
                    // We here a and b are objects, we need to sort according to their age
                    return this.sortType === 0? a.age - b.age : b.age - a.age
                })
            }
            
            // Return arr, the value of filterPersons is determined
            return arr;
        }
      }
    });

Step Analysis

The core content is this area, let's go step by step

First of all, we need to figure out, who is the data that filterPersons depends on? (keyWords and sortType)

First of all, when get is called for the first time, it is called when the page DOM element is loaded.
- At this time, a filter will be performed on the original array persons
- The filter condition is the input content keyWords
- When it is just loaded, there is no input information for keyWords, that is, the content of the input input is an empty string
- The empty string must exist in the string item.name, so the first filtering is actually to store the content of the entire persons in the variable arr
- Next, start to judge whether sorting is required. Since it has just been loaded, the value of sortType is 2, so it will not be sorted. The current page is in the original sorting state.
First, let's get familiar with the process. When the page starts, the get method of the computed property will be called.
Next, we enter the content of the input box, let's observe the change of filterPersons in vue
- But there is no sort statement output in the console
Now, let's clear the console and click sort
This control flow is very clear