Home > Article > Web Front-end > 2020-05-30——axios data interaction and select-all multi-thinking expansion
> 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!