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

Question

​

​

我正在尝试使用谷歌地图和插件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。