Vue中的数据传递问题，带有模板标记和计算属性

Question

我正在使用Vuetify构建我的项目，在尝试访问computed中的属性时遇到了一个错误。这是我的代码

<v-stepper
v-model="currentStep"
:vertical="true"
:alt-labels="false"
>
<template>
<template v-for="n in ageStepsArray.length">
<v-stepper-step
:key="`${n}-step`"
:complete="currentStep > ageStepsArray[n-1]"
:step="ageStepsArray[n-1]"
>
{{ageStepsArray[n-1]}} years old
</v-stepper-step>
<v-stepper-content
:key="`${n}-content`"
:step="ageStepsArray[n-1]"
>
<v-list
flat
>
<v-list-item-group
v-model="settings"
multiple
>
<v-list-item v-for="(item,index) in dreamList" :key="index">
<template v-slot:default="{active}">
<v-list-item-action class="pt-1">
<v-checkbox v-model="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{item.title}}</v-list-item-title>
<v-list-item-subtitle>
//error occurs here     Estimated cost: {{item.cost}} // want to change to getCostList[index].cost here
<v-btn icon x-small @click.stop="editValue(item)">
<v-icon >mdi-pencil-circle-outline</v-icon>
</v-btn>  
</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list>
<v-btn
color="primary"
@click="nextStep(ageStepsArray[n-1])"
>
Continue
</v-btn>
</v-stepper-content>
</template>
</template>
</v-stepper>
/// script
computed:{
...mapGetters({
getCostList: "listCost/getList",
}),
}

错误：属性或方法"getCostList"未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中是被动的，或者对于基于类的组件是被动的。

我可以成功地访问v-stepper之外的getCostList，并且我在谷歌上搜索了很多解决方案，它似乎与template标签的范围有关，但我发现关于这类问题的结果很少。

我想知道我是否使用了错误的方法来调用"getCostList"，或者有其他方法来解决这个错误。

Answer 1

你没有提供完整的脚本部分，这就是为什么不能真正说出来，但这是最基本的答案，我现在可以写。

data() {
return {
// Define here
getCostList: ''; //for Example
};
},