vue2双向数据绑定全选反选问题解决方法

最新推荐文章于 2022-05-18 19:22:27 发布

@-小飞

最新推荐文章于 2022-05-18 19:22:27 发布

阅读量1.4k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_64531353/article/details/123574850

版权

本文详细探讨了在Vue2中使用ElementUI实现表格全选和反选功能时遇到的问题及解决方案，重点讲解双向数据绑定在该场景下的应用。通过实例代码解析，帮助开发者理解如何优雅地处理全选与反选的逻辑。

摘要由CSDN通过智能技术生成

<template>
  <div class="home">
    <div><input type="checkbox" :checked="checkAll" @click="check">全选</div>
    <div v-for="item in list" :key="item.id">
      <input type="checkbox" v-model="item.check">{
  {item.name}}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Home',
  data() {
    return {
      list: [],
      checkAll: false,
      _list: []
    }
  },

  created() {
    axios.get('/data.json').then(res => {
      this.list = res.data.goods.map(item => {
        return {
          ...item,
          check: false
        }
      })
    })
  },

  methods: {
    check(e) {
      // 第一种解决办法 使用vue的变异数组的方法
      this.list.forEach(item => {
        item.check = e.target.checked