Vue.js offcanvas内容

Question

我正在使用vue.js在这个网站上工作。它使用谷歌地图API。我放了一个offcanvas侧边栏，点击打开和关闭。我正在尝试将东西放入我的侧边栏但是它不起作用并且始终显示未定义。

附：我是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寻找谷歌地图的Vue组件。

现在，你在mounted里面有局部变量搞砸了。无论本地内部是什么，都不会在该功能之外工作，包括模板。如果你将它声明为title这样的组件的变量，这可能会有效，

```

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

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

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

```