使用 setter 修改源数据: 如果你希望通过 v-model 或其他方式修改 computed内的相关数据,你需要在计算属性中提供一个 setter,通过它来更新原始数据。

例如,假设你希望通过 allSelected 来更新 selectedKeys(当全选时将 selectedKeys 设置为 keys,否则将其清空):

<template>
  <input type="checkbox" v-model="allSelected"> Select All</input>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const keys = ref([1, 2, 3, 4]);
    const selectedKeys = ref([1, 2]);

    const allSelected = computed({
      get() {
        return keys.value.length === selectedKeys.value.length;
      },
      set(value) {
        if (value) {
          selectedKeys.value = [...keys.value];  // 全选
        } else {
          selectedKeys.value = [];  // 清空选中
        }
      }
    });

    return {
      keys,
      selectedKeys,
      allSelected
    };
  }
};
</script>

解释:
get():计算属性的读取方法,返回当前的 allSelected 状态。
set():计算属性的写入方法,当 allSelected 被修改时,通过 set 来更新 selectedKeys 或 keys 的值。例如,true 表示全选,所以将 selectedKeys 设置为 keys,false 则表示取消全选,清空 selectedKeys。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐