Vue. js is used to achieve full checkbox selection and inversion. vue. jscheckbox

Vue. js is used to achieve full checkbox selection and inversion. vue. jscheckbox

Preface

This article mainly shares with you the use of Vue. in js, the checkbox option is reversed. A bug exists in the previously written code, that is, when you select all options, the next option is removed, and then the result is reversed. Later, I would like to thank my friend for leaving a message to help me solve this problem. Let's take a look at how it is implemented.

Html sample code

<Template> <div> <input type = 'checkbox' class = 'input-checkbox' v-model = 'checked' v-on: click = 'checkedall'> select all <template v-for = 'checkb in checkboxdata'> <input type = 'checkbox' name = 'checkboxinput' class = 'input-checkbox' v- model = 'checkboxmodel' value = '{checkb. id }}'> {checkb. value }}</template> </div> </template>

Js sample code

<Script> export default {methods: {checkedAll: function () {var _ this = this; console. log (_ this. checkboxModel); if (this. checked) {// implements the reselect _ this. checkboxModel = [];} else {// select all _ this. checkboxModel = []; _ this. checkboxData. forEach (function (item) {_ this. checkboxModel. push (item. id) ;}}}, watch: {// deep watcher 'checkboxmodel': {handler: function (val, oldVal) {if (this. checkboxModel. length = this. checkboxData. length) {this. checked = true;} else {this. checked = false ;}, deep: true }}, data () {return {checkboxData: [{id: '1', value: 'apple'}, {id: '2', value: 'lychee '}, {id: '3', value: 'banana'}, {id: '4', value: 'Dragon go'}], checkboxModel: ['1', '3', '4'], checked: "" }}</script>

Watch

Type: Object

Details:

An object. The key is the observation expression, and the value is the corresponding callback. The value can also be a method name or an object, containing options. Each key is called during instantiation.$watch().

Example:

Var vm = new Vue ({data: {a: 1}, watch: {'A': function (val, oldVal) {console. log ('new: % s, old: % s', val, oldVal)}, // method name 'B': 'somemethod', // deep watcher 'C ': {handler: function (val, oldVal ){/*... */}, deep: true }}) vm. a = 2 //-> new: 2, old: 1

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.