Question

我正在使用vue.js在这个网站上工作。它使用谷歌地图API。我放了一个offcanvas侧边栏，点击打开和关闭。我试图把东西放进我的侧边栏，但它不起作用，总是让我看不清楚。

P.S。我是vue的新手，我使用的版本是2，它使用的是ES5，而不是ES6。

这里是js文件：

$(document).ready(function () {
// noinspection JSAnnotator
var vue = new Vue({
    el: '#map-control',

    // data: {
    //     title:'HELLO WORLD'
    // },
    mounted: function () {
        var latLng = new google.maps.LatLng(47.6062, -122.3321);
        var mapOptions = {
            zoom: 3,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.SATELLITE,

            // disables the yellow man
            panControl: false,
            streetViewControl: false,
            // disables other types of MAP, forces to only use Satellite view
            mapTypeControlOptions: {mapTypeIds: []}
        };
        // add the map
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        map.setOptions({minZoom: 3, maxZoom: 15});

    },
    components: {
        'vue-offcanvas': VueOffcanvas
    },

    data: function data() {
            return {
                showDefault: false,
                align: 'left'
            }

    },

    methods: {
        show: function show(align) {
            this.align = align;
            this.showDefault = true;
        }
    }
});

这是HTML文件：

<div id="map-control">
    <div id="site-canvas">

        <div class="site-menu">
            <button class ="navbar-header btn btn-md btn-secondary" type="button" @click="show('left')">&#9776;</button>
        </div>

        <vue-offcanvas v-model="showDefault" :align="align" :width="600" :duration=".3" effect="ease-in-out" class="site-menu">
            Sidebar Content goes here
            <div class="site-menu">

                <button class="navbar-header btn btn-md btn-secondary" type="button" @click="showDefault = false">

                </button>
            </div>

        </vue-offcanvas>
        <div id="map-canvas"></div>
    </div>
</div>

Answer 1

有趣的是，您同时拥有jQuery和Vue。也许将来您可以在npm上找到Google地图的Vue组件。

目前，您在mounted内部已经搞乱了局部变量。无论本地内部是什么，都不会在该功能之外工作，包括模板。如果您将其声明为title，

等组件的变量，则可能会有效

```

var vue = new Vue({
  el: '#map-control',

  data: function data() {
    return {
      map: null
    }
  },

  created() {
    this.map = new google.maps.Map(...);
  }
});

```

Vue.js offcanvas内容

1 个答案: