typescript - 反应性和计算属性的问题 Vue 3

问题描述

原则上我有这个菜单：

具有以下路径的项目 1（编号 1 涂成橙色）：http://localhost:8080/#/documents

具有以下路径的项目 2（编号 2 涂成橙色）：http://localhost:8080/#/documents/1

以及具有以下路径的项目 3（编号 3 涂成橙色）：http://localhost:8080/#/documents/2

例如，当我单击第 2 项时，标有蓝色框的组合框应设置为默认值，表中的项目应按此值过滤，如以下屏幕截图所示：

所以我想要的是，当我单击第 1 项时，我可以根据我在组合中选择的过滤器过滤或不过滤表格将显示的值。出于这个原因，我创建了以下方法和属性：

let route = useRoute();
let filter = computed({
            get: () => {
                console.log('get');
                return createFilter(route.params);
            },
            set: (newValue: any) => {
                console.log('set');
                route.params = newValue;
            },
        });

当我们从子组件接收到我们要应用的过滤器时，就会执行此方法。

function onEventFiltersForGrid(filters: any) {
            filter.value = filters;
        }

我创建的创建过滤器的方法如下：

function createFilter(routeParams: any) {
            console.log(routeParams);
            if (routeParams.folderId === undefined || routeParams.folderId === '') {
                console.log('primer if');
                return [filterCategoryFolderId, '<>', null];
            }
            else if (routeParams.id !== undefined && routeParams.id !== '' && routeParams.id !== isNaN) {
                console.log('segundo if');
                return [
                    [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)],
                    'and',
                    [filterId, '=', Number.parseInt(routeParams.id)]
                ];
            }
            else {
                console.log('else');
                return [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)];
            }
        }

我遇到的问题是，当我在组合中选择一个项目来构建表的新过滤时，出现以下错误：写入操作失败：计算值是只读的

我附上html代码：

<div>
    <document-list :filter="filter" :showFolder="true" :showCategory="true" :showType="true" :showSubType="true">
        <!-- Filtros -->
        <filter-hierarchy @EventFiltersForGrid="onEventFiltersForGrid($event)" :archivedId="archivedId"></filter-hierarchy>
    </document-list>
</div>

标签： typescriptvue.jsvuejs3vue-composition-apivue-reactivity

您收到的错误消息是因为默认情况下计算的是 getter。

在具有独立计算的 setup() 中，它们显示以下示例：示例

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

那么，你在哪里定义 ref()？
您可以使用 .value 获取 ref 的值

Options API 中的计算 getter/setter 如下所示：

let filter = computed({
            get() {
                console.log('get');
                return createFilter(route.params);
            },
            set(newValue: any) {
                console.log('set');
                route.params = newValue;
            },
        });

typescript - 反应性和计算属性的问题 Vue 3 - 组合 API

问题描述

解决方案

推荐阅读