返回

javascript-在 data() 方法中读取时,VueJS 属性未定义

发布时间:2022-08-12 23:37:04 202
# 前端

我无法理解道具在 VueJS 中是如何工作的,我们将不胜感激。这是一个简单的谷歌地图组件,我希望在页面上显示它并将 div 的 id 元素作为道具动态传递给底层模板。

.html 文件 -

<div id="app">

    <google-map name="map"></google-map>

</div>

vue 文件——

<template>

    <div :id="mapName"></div>

</template>

<script>

module.exports = {

    name: 'google-map',

    props: [ 'name' ],

    data: () => {

        console.log(this.name); // ERROR: name is undefined

        return {

            mapName: this.name

        };

    },

    mounted: () => {

        const map = new google.maps.Map(document.getElementById(this.mapName), {

            zoom: 14,

            center: new google.maps.LatLng(39.305, -76.617)

        });

    }

}

</script>

<style scoped>

#map {

  width: 800px;

  height: 600px;

  margin: 0 auto;

  background: gray;

}

</style>

我得到的错误是this.name在组件对象的 data() 方法中未定义。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(1)
按点赞数排序
用户头像