`
Expected property shorthand` 错误通常是在使用对象字面量时，对象的键和对应的值变量名相同时，没有使用属性简写语法导致的。在原代码中，`competitionName: searchValue` 这里 `searchValue` 是一个 `ref` 对象，应该使用 `searchValue.value` 来获取其实际值。以下是修改后的 `queryCompetitions` 方法：
```
vue
<template>
<!-- 页面模板内容 -->
</template>
<script lang="ts" setup>
import { computed, onBeforeMount, ref, watch, nextTick } from '
vue';
import { storeToRefs } from 'pinia';
import { useI18n } from '
vue-i18n';
import { useRoute } from '
vue-router';
import { RadioGroup, RadioItem } from '@/components/radio';
import EmptyData from '@/components/EmptyData.
vue';
import CompetitionQuerySelect from '@/components/competition/CompetitionQuerySelect.
vue';
import { useStoreDeviceGetters } from '@/helpers';
import { useCompetitionStore } from '@/stores/competition';
import TimeUtils from '@/utils/TimeUtils';
import { CompetitionType } from '@/constants/competition';
import router from '@/router';
import { LocalTag } from '@/components/localSelect/types';
import { CompetitionBriefDTO, QueryCompetitionsRequest } from '@/types/competition';
import CompetitionService from '@/services/competitionService';
const { t } = useI18n();
const route = useRoute();
const planId = computed(() => route.query.planId);
const isBindCompetition = computed(() => !!planId.value);
const competitionStore = useCompetitionStore();
// 赛事列表
const competitionList = ref<CompetitionBriefDTO[]>([]);
// 总条数
const totalNum = ref(0);
// 是否加载完毕
const isCompleted = computed(() => competitionList.value.length >= totalNum.value);
const { competitionId, isInited } = storeToRefs(competitionStore);
const allCompetitionRadioList = computed(() => competitionList.value.map(competition => ({
value: competition.id,
text: competition.name,
desc: competition.eventTime
? `${TimeUtils.formatTime(competition.eventTime, 'YYYY/MM/DD')}｜${competition.country}·${competition.city}`
: `${t('IDS_h5_determined')}｜${competition.country}·${competition.city}`,
})));
const isEmptyData = computed(() => allCompetitionRadioList.value.length === 0);
const searchValue = ref('');
const localValue = ref<Record<LocalTag, string[]>>({
[LocalTag.CONTINENT]: [],
[LocalTag.COUNTRY]: [],
[LocalTag.CITY]: [],
});
const timeValue = ref<string[]>([]);
const isDisableSubmit = computed(() => !competitionId.value);
const isHPullForMore = computed(() => allCompetitionRadioList.value.length >= 10);
const completeContent = ref(t('IDS_h5_completeContent'));
const updatingContent = ref(t('IDS_h5_updatingContent'));
const failedContent = ref(t('IDS_h5_failedContent'));
let page = 1;
const limit = 10;
const type = CompetitionType.RUN;
const HPullForMoreRef = ref<InstanceType<any> | null>(null);
const { isThemeDark, isMirror } = useStoreDeviceGetters();
async function queryCompetitions(page: number) {
try {
if (page === 1) {
isInited.value = false;
}
const param: QueryCompetitionsRequest = {
type: CompetitionType.RUN,
page,
limit: 10,
continentIds: localValue.value[LocalTag.CONTINENT],
countryIds: localValue.value[LocalTag.COUNTRY],
cityIds: localValue.value[LocalTag.CITY],
timeRanges: timeValue.value,
competitionName: searchValue.value,
};
const { competitions, total } = await CompetitionService.queryCompetitions(param);
competitionList.value = competitions;
totalNum.value = total;
console.log(`[RELEASE] queryCompetitions success. competitions:`, competitions);
} catch (error: any) {
console.error(`[RELEASE] queryCompetitions failed. err: ${error.message}`, error);
}
isInited.value = true;
}
onBeforeMount(() => {
queryCompetitions(1);
});
const handleSearch = (searchValue: string, localValue: Record<LocalTag, string[]>, timeValue: string[]) => {
console.log(`[RELEASE] CompetitionSelect handleSearch searchValue: ${searchValue}, timeValue: ${timeValue}, localValue: ${localValue}`);
// 后续调用接口查询逻辑
queryCompetitions(1);
};
const pullForMore = () => {
const pullForMore = HPullForMoreRef.value;
if (isCompleted.value) {
pullForMore?.completeUpdate();
return;
}
page = page + 1;
queryCompetitions(page);
pullForMore?.completeUpdateIng();
};
</script>
```
在修改后的 `queryCompetitions` 方法中，将所需的参数都封装在方法内部，调用时只需要传入 `page` 参数。同时，使用 `searchValue.value` 来获取 `searchValue` 的实际值，避免了 `
Expected property shorthand` 错误。
本文指导如何修复'Expectedpropertyshorthand'报错，提供从冗长写法到简洁形式的代码转换实例，帮助开发者理解和应用对象字面量的简写规则。
扫一扫
1298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
