How to use Vue.js instructions to implement the select all function

This article mainly introduces how to use the Vue.js command to implement the select-all function. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

I recently made two Vue projects all need to implement the function of selecting all and inverting selection. The two projects use two implementation methods. The first project uses Vue's computed, and the second project uses instructions to implement it. After using it, I found that the instructions are more convenient. Next, we will introduce how to use instructions to select all.

Because I just started to contact vue not long ago, the implementation of full selection refers to the implementation method on Zhihu:

1. Get the data from the server and set the checked attribute for each item

2. Calculate the selected number selectCount. If the selected number is equal to the number of selectItems, select all selectAll selected

3. When you click Select All, each Set the checked attribute of each item to true, and set it to false when inverting the selection.

4. Every time the attribute of selectItems changes, the items with checked true value are put into the array checkedGroups

The following is the implementation code:

 //全选
 data: function() {
  return {
   selectItems: [], // 从服务器拿到的数据
  }
 },
 computed: {
  // 全选checkbox绑定的model
  selectAll: {
   get: function() {
    return this.selectCount == this.selectItems.length;
   },
   set: function(value) {
    this.selectItems.forEach(function(item) {
     item.checked = value;
    });
    return value;
   }
  },
  //选中的数量
  selectCount: {
   get: function() {
    var i = 0;
    this.selectItems.forEach(function(item) {
     if (item.checked) {
      i++;
     }
    });
    return i;
   }
  },
  //选中的数组
  checkedGroups: {
   get: function() {
    var checkedGroups = [];
    this.selectItems.forEach(function(item) {
     if (item.checked) {
      checkedGroups.push(item);
     }
    });
    return checkedGroups;
   }
  }
 }

This method is not convenient to use. First of all, it is difficult to reuse. You need to write computed every time you want to use it. Secondly, selectAll, checkedGroups, and selectItems are all fixed and not very flexible.

So in this project, I used vue instructions to re-implement the function of selecting all. The idea of ​​directive is actually similar to computed. Let’s start with the code:

export default {
 'check-all': {
  twoWay: true,
  params: ['checkData'],
  bind() {
   /**
    - 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框
    */
   this.vm.$watch(this.params.checkData, (checkData) => {
    if (checkData.every((item) => item.checked)) {
     this.set(true);
    } else {
     this.set(false);
    }
   }, { deep: true });
  },
  // checkAll发生更改时
  update(checkAll) {
   /**
    - 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false
    */
   if (checkAll) {
    this.vm[this.params.checkData].forEach((item) => {
     item.checked = true;
    });
   } else {
    this.vm[this.params.checkData].forEach((item) => {
     item.checked = false;
    });
   }
  },
 },
};

Call:

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData">
  <ul>
   <li v-for="item in checkData">
    <input type="checkbox" v-model="item.checked">
    {{item.text}}
   </li>
  </ul>

## Let’s talk about the advantages of using it this way:

1. It is easy to use. Just write the

v-check-all command and check-data where needed

2. The name of the model and array for full selection can be customized. You can use any name. If the model for full selection does not want to be called checkAll, it can be called checkAllData. If the array does not want to be called checkData, it can be called dataFromServer.

In the instruction, specify twoWay as true, you can use

this.set(value) to set the value of checkAll, and use params to receive the attribute value checkData on the binding instruction element, also It is the array that needs to be operated on.

Use

this.vm to obtain the context of using the instruction, and call the context's $watch to monitor changes in checkData. If all checkData is selected, set checkAll to true. Otherwise set checkAll to false.

When the instruction value (checkAll) changes, if it is true, set the checked attributes of checkData to true, otherwise it is false. At this point, a select-all command is completed.

When doing this select all command, I originally wanted to use paramWatchers to monitor changes in checkData, but I found that when checkData changes, the callback of paramWatchers will not be triggered. After looking at the source code, I found that paramWatchers actually

$watch is also called, but it does not support deep detection:

Directive.prototype._setupParamWatcher = function (key, expression) {
 var self = this;
 var called = false;
 var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) {
 self.params[key] = val;
 // since we are in immediate mode,
 // only call the param change callbacks if this is not the first update.
 if (called) {
  var cb = self.paramWatchers && self.paramWatchers[key];
  if (cb) {
  cb.call(self, val, oldVal);
  }
 } else {
  called = true;
 }
 }, {
 immediate: true,
 user: false
 });(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch);
};

The above is the entire content of this article, I hope it will be useful for everyone’s learning For help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

About the analysis of the use of vue routing

About the analysis of how vue introduces sass global variables

Use vue-router to complete simple navigation function

##

The above is the detailed content of How to use Vue.js instructions to implement the select all function. For more information, please follow other related articles on the PHP Chinese website!