使用computed计算属性实现购物车勾选
原理
在 Vue 3 中,computed
属性默认是只读的,但你可以通过提供 set
方法来使它可写。这样,当计算属性的值被修改时,可以触发相应的逻辑来更新相关的数据。
效果示意
说明
- get 方法:用于获取计算属性的值。
- 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" />
<span>{{ item.sum }}</span>
</li>
</ul>
<el-checkbox v-model="isAllChecked" label="全选" size="large" />
<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>