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

我正在使用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",
      }),
    }

{{ageStepsArray[n-1]}}岁
{{item.title}
//此处发生错误估计成本：{{item.cost}}//要更改为getCostList[index]。此处的成本
铅笔圈轮廓
继续
///剧本
计算：{
…地图绘制者({
getCostList:“listCost/getList”，
}),
}

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

我可以在

v-stepper

之外成功访问GetCostList，我在谷歌上搜索了很多解决方案，它似乎与

template

标记的范围有关，但我发现这类问题几乎没有结果

---

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

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

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

---

我注意到在你的问题中，你把它叫做

getCostList

和

getCostList

。如果在模板中使用错误的名称，则会引发相同的错误。这是我的错，我再次检查了拼写，它们是

getCostList

，但仍然会出现相同的错误。您可能需要进行更改以获得相关帮助。从代码中删除所有不必要的内容，包括我们看不到的变量。和/或如果可能的话，在我或不是我的问题上发布复制，但可能是因为已经有一个名为

getCostList

的计算程序。声明同名的数据变量是不必要的，并且会引发错误。它也不能解释为什么模板中没有定义

computed

，而

mapGetters

是将存储getter映射到本地计算属性的助手