[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 {

    data () {

        return {

            latitude: latitude,

            longitude: longitude

        }

    }

你导出的对象是一个 Vue 配置对象，只有它识别的属性才会有任何影响。虽然将其视为类定义可能会很方便，但实际上并非如此。无法识别的属性，如latitudeand longitude，只会被丢弃，不会成为组件实例的成员。

如果您希望某些东西可用，因为this.blah您需要将其定义blah为 prop、数据属性、计算属性或方法。在模板中this.是隐式的，但同样的规则适用。

更新：更正latitute了从原始代码中复制的错字。