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
  };
},