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

我该如何解决这个问题？

编辑：

我把脚本组件改成：

<script>
  var latitute = 30.08674842
  var longitude = -97.29304982
  import {
    gmapApi
  } from 'vue2-google-maps'
  export default {
    data() {
            console.log('im in data')

      return {
        latitute: latitute,
        longitude: longitude
      } // name:'myMap'
    }
  }
</script>

没有变化 - 我遇到了同样的错误

编辑2：

我如上更改了数据组件，您可以在 devtolls 控制台中看到它正在被读取。重新启动计算机仍然没有变化。对下一步做什么有什么想法吗？

Answer 1

你需要让你的属性响应data:

export default {
    data () {
        return {
            latitude: latitude,
            longitude: longitude
        }
    }

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

如果您希望以this.blah 的形式提供某些东西，您需要将blah 定义为道具、数据属性、计算属性或方法。在模板中，this. 是隐含的，但适用相同的规则。

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