Home  >  Article  >  Web Front-end  >  2020-05-30——axios data interaction and select-all multi-thinking expansion

2020-05-30——axios data interaction and select-all multi-thinking expansion

A 枕上人如玉、
A 枕上人如玉、Original
2020-05-30 14:49:47175browse

> app.js

# Key points:

1. Three ways to solve this pointing problem

2. The use of ES6 arrow functions

3.Ternary operation instead of if else

4.forEach traversal method

5.Usage of JSONPlaceholder test api

# Function implementation

1 .Select all multiple thinking expansion

2.Finally complete the optimization with two lines of code

```

window.onload = function(){

//The first way

//var vm = new Vue({ //Global instantiation object

var vm = new Vue({

el:"# app",

data:{

lists:[],

checkAll:false, //All-selected status

check:false,

},

methods:{

// ES5 writing method

getLists:function(){

//The second way (The most commonly used method in the actual project development process)

//Define this in advance

//Reason: "This is constantly changing. Generally, whoever calls this points to Who"

var self = this;

axios({

methods:"get", //get post put delete | Query add modify delete

url:"http://jsonplaceholder.typicode.com/users", //Interface address

// }).then(function(res){ //Request successful

/ / The third way

// Reason: "In ES6, the this of the arrow function points to the definer, who defines who this points to"

}).then(res=>{ // Request successful

console.log(res);

// Data cannot be rendered normally due to this pointing problem

this.lists = res.data; // Rendering Data

// Solution

// First way

//vm.lists = res.data; // Rendering data

/ /Second way

// self.lists = res.data;

}).catch(function(error){ // Request failed

console.log (error);

})

},

// ES6 writing method

changeCheckAll(){ //Trigger select all

// Ordinary for traversal method

// for( var i=0;i

// this.lists[i].check = this.checkAll;

// };

// A more advanced forEach traversal method

// this points to the reason why synchronization cannot be performed

// this.lists.forEach(function(item,index){

this.lists.forEach(item=>{

item.check = this.checkAll;

});

},

curChange(){

// 1. Number of checked sub-options

// filter() method Filter

// var num = this.lists.filter(function(item){

// return item.check == true

// }).length;

// ES6 arrow function

// var num = this.lists.filter(item => item.check).length;

// console.log(num);

// 2. Judge the number == 10 Select all and check !=10 Select all and uncheck

// if(num ==this.lists.length){

// this.checkAll = true;

// }else{

// this.checkAll = false;

// };

// Ternary operation instead of if else

// num == this.lists.length ? this.checkAll = true : this.checkAll = false ;

// Optimize every() to return true false

// this.checkAll = this.lists.every(function(item){

// return item. check;

// })

// Using ES6 arrow function

this.checkAll = this.lists.every(item=>item.check);

}

},

mounted:function(){

this.getLists();

}

})

}

```

> Case address: http://jingrao.tianyuyezi.com/vue-demo/axios/index.html

The above is the detailed content of 2020-05-30——axios data interaction and select-all multi-thinking expansion. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn