今天工作時(shí)候遇到了checkbox的v-model雙向綁定問題

話不多說, 直接上代碼！

1. <template>

<template v-for="item of sleectorList">
  <div :key="item.index + 'sleectorList'">
    <input
          type="checkbox"
          :value="item.index"
          :checked="checkboxList.indexOf(item.index) > -1"
          @change="checkHandle($event, item.index)"
    />
    <span>{{ item.value }}</span>
  </div>
</template>

<template v-for="(item, index) of checkboxList">
  <div class="row" :key="item + 'checkboxList'">
    <div class="serve">{{ sleectorList[item].value }}</div>
      <div class="handle">
        <span>權(quán)限設(shè)置</span>
        <div @click="checkboxList.splice(index, 1)">刪除</div>
      </div>
  </div>
</template>

2. <script>

data() {
    let sleectorList = [
      {
        index: 0,
        value: 'hahaha0',
      },
      {
        index: 1,
        value: 'hahaha1',
      },
      {
        index: 2,
        value: 'hahaha2',
      },
      {
        index: 3,
        value: 'hahaha3',
      },
    ]
    let checkboxList = []
    return { sleectorList, checkboxList }
},
methods: {
  checkHandle(e, i) {
    if (e.target.checked) {
      // 選中了往數(shù)組checkboxList里push標(biāo)簽value綁定值 
      // 如果是數(shù)字會(huì)被轉(zhuǎn)換成字符串 需要parseInt()!!
      this.checkboxList.push(parseInt(e.target.value))
    } else {
      // 傳入的i 就是存到checkboxList數(shù)組里的值
      // this.checkboxList.indexOf(i)獲取位置
      // this.checkboxList.splice()刪除它！
      this.checkboxList.splice(this.checkboxList.indexOf(i), 1)
    }  
  },
},

屏幕錄制2020-02-2819.46.48.gif