[Vue 警告]：未定义属性或方法

Question

我正在尝试使用谷歌地图和插件https://www.npmjs.com/package/vue2-google-maps构建一个 vue 谷歌地图组件。我已经使用 npm 安装了插件，并且当我的 googleMap.vue 组件开始工作时：

-->

        <!-- :center="{lat: 30.08674842, lng: -97.29304982}" -->

        <GmapMap

        :center="{lat: latitude, lng: longitude}"

        :zoom="15"

        map-type-id="terrain"

        style="width: 500px; height: 300px"

      >

      </GmapMap>

      </span>

      </v-flex>

    </v-container>

  </div>

</template>

<script>

  var latitute = 30.08674842

  var longitude = -97.29304982

  import {

    gmapApi

  } from 'vue2-google-maps'

  export default {

    // name:'myMap'

    latitute:latitute,

    longitude:longitude,

   }

<

当我运行这个时，我得到：

 ERROR  [Vue warn]: Property or method "longitude" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

我怎样才能解决这个问题？

Answer 1

您需要使您的属性具有反应性data：export default {&nbsp; &nbsp; data () {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: latitude,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: longitude&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }你导出的对象是一个 Vue 配置对象，只有它识别的属性才会有任何影响。虽然将其视为类定义可能会很方便，但实际上并非如此。无法识别的属性，如latitudeand longitude，只会被丢弃，不会成为组件实例的成员。如果您希望某些东西可用，因为this.blah您需要将其定义blah为 prop、数据属性、计算属性或方法。在模板中this.是隐式的，但同样的规则适用。更新：更正latitute了从原始代码中复制的错字。