Question

在控制台中，我看到以下消息：

属性或方法Id未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的

如何摆脱它？

<template>
  <v-content>
    <v-container grid-list-md text-xs-center>
      <v-layout v-for="person in people" :key="person.Id" row wrap>
        <v-flex :key="Id" sm1 hidden-xs-only>
          <v-card-text class="px-0">{{ person.Id }}</v-card-text>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
<template>

<script>
export default {
  data: function() {
    return {
      people: null 
    }
  },
  mounted() {
    axiosInstance.get("person").then(response => {      
      this.people = response.data.persons;
    });
  }
}
</script>

Answer 1

<v-flex :key="Id" sm1 hidden-xs-only>

:key是v-bind:key的另一种语法，应该包含JavaScript代码。在您的情况下，Id未定义。您可能想使用'Id'字符串文字。

使用

<v-flex :key="'Id'" sm1 hidden-xs-only>

或

<v-flex key="Id" sm1 hidden-xs-only>

或在vue实例中定义Id数据。

属性或方法X未在实例上定义，但在渲染期间被引用

1 个答案: