使用computed计算属性实现购物车勾选

原理

在 Vue 3 中，computed 属性默认是只读的，但你可以通过提供 set 方法来使它可写。这样，当计算属性的值被修改时，可以触发相应的逻辑来更新相关的数据。

效果示意

说明

1. get 方法：用于获取计算属性的值。
2. set 方法：用于设置计算属性的值。当计算属性的值被修改时，set 方法会被触发。

<template>
  <div style="padding-left: 40px;">
    <ul>
      <li v-for="(item, index) in goodsList" :key="index">
        <el-checkbox v-model="item.isChecked" :label="item.name" size="large" />
        &nbsp;
        <span>{{ item.sum }}</span>
      </li>
    </ul>
    <el-checkbox v-model="isAllChecked" label="全选" size="large" />
      &nbsp;
      <span>{{ total }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';

const goodsList = reactive([
  { name: 'xxx', isChecked: false, sum: 24 },
  { name: 'jjj', isChecked: false, sum: 56 },
  { name: 'vvv', isChecked: false, sum: 12 },
]);

const isAllChecked = computed({
  get() {
    return goodsList.every(item => item.isChecked)
  },
  set(val) {
    goodsList.forEach(item => item.isChecked = val)
  }
});

const total = computed(() => {
  return goodsList.reduce((sum, item) => sum + (item.isChecked ? item.sum : 0), 0);
});
</script>