Vue checkbox selected question

<template>
  <div>
    <div class="form-group">
      <label ></label>
      <input type="text" class="form-control" v-model="k">
    </div>
    <div class="form-group" v-if="k">
      

<a href="javascript:;" @click="all" ></a>

<template v-for="(v, index) in selects"> <label v-if="v.name.toLowerCase().indexOf(k.toLowerCase()) != -1"> <input type="checkbox" v-model="v.checked" > {{v.name}} </label> </template> </div> </div> </template> <script> export default { data() { return { k:null, models:[], } }, props:["data", "select"], methods:{ all(){ for (var i = 0; i < this.selects.length; iPP) { this.selects[i].checked = true } } }, mounted() { this.selects = this.select } } </script>

enter A in the search box to display several results, and then click Select all. Those checkbox didn"t respond. When I typed another keyword in the search box, checkbox was all checked again. This problem has been bothering me for a long time

.
Jul.23,2021

selects you don't define it in data


you can take a look at the official document of vue (ide/list.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.):

due to the limitation of JavaScript, Vue cannot detect arrays of the following changes:

  1. when you set an item directly using the index, for example: vm.items [indexOfItem] = newValue
  2. when you modify the length of an array, for example: vm.items.length = newLength

so when you click to call the all function for the first time, although the checked value of each element of this.selects is changed to true, such a change will not be detected by vue, so the page will not respond to it. When you enter a new keyword, the conditional rendering will be re-performed according to the current this.selects value, so all will be selected.

in addition, you can refer to the style guide. Standardize the use of v-for and v-if: ide/-sharp%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/style.


Why don't you write out that select, so how can others read it for you?

Menu