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

Question

我正在尝试使用Google地图和插件https://www.npmjs.com/package/vue2-google-maps构建Vue Google地图组件。我已经使用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>

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

edit2：

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

Answer 1

您需要使您的属性具有反应性data：

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

您要导出的对象是Vue配置对象，只有它可以识别的属性才有效。尽管将其视为类似于类定义可能会很方便，但实际上并非如此。无法识别的属性（例如latitude和longitude）将被丢弃，并且最终不会成为组件实例的成员。

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

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