html - Vue.js offcanvas content - Stack Overflow
Stack Overflow
About
Products
For Teams
Stack Overflow
Public questions & answers
Stack Overflow for Teams
Where developers & technologists share private knowledge with coworkers
Talent
Build your employer brand
Advertising
Reach developers & technologists worldwide
About the company
s-popover#show"
data-s-popover-placement="bottom-start" />
Loading…
current community
Stack Overflow
help
chat
Meta Stack Overflow
your communities
Sign up or log in to customize your list.
more stack exchange communities
company blog
Log in
Sign up
Home
Public
Questions
Tags
Users
Companies
Collectives
Explore Collectives
Teams
Stack Overflow for Teams
– Start collaborating and sharing organizational knowledge.
Create a free Team
Why Teams?
Teams
Create free Team
Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Vue.js offcanvas content
Ask Question
Asked
4 years, 9 months ago
Modified
4 years, 9 months ago
Viewed
698 times
I am working on this website using vue.js. it uses google maps api. I put there an offcanvas sidebar that opens and closes on click. I'm trying to put stuff into my sidebar but it doesn't work and always show me undefined.
P.S. I'm new to vue and the version I'm using is 2 and it uses ES5, NOT ES6.
Here's the js file:
$(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;
});
Here's the HTML file:
<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')">☰</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>
htmlvuejs2
Share
Improve this question
Follow
edited Mar 1, 2018 at 7:11
Tomasz Mularczyk
33.1k1919 gold badges113113 silver badges160160 bronze badges
asked Mar 1, 2018 at 4:54
PouriaPouria
1555 bronze badges
Add a comment
1 Answer
Sorted by:
Reset to default
Highest score (default)
Trending (recent votes count more)
Date modified (newest first)
Date created (oldest first)
Interesting, you are having jQuery and Vue at the same time. Maybe in the future you can look for a Vue component for Google map over npm.
For now, you have local variable messed up inside mounted. Whatever local inside is not gonna work outside that function, including templates. This might work if you declare it a variable for the component like title,
```
var vue = new Vue({
el: '#map-control',
data: function data() {
return {
map: null
},
created() {
this.map = new google.maps.Map(...);
});
```
Share
Improve this answer
Follow
answered Mar 1, 2018 at 16:12
windmaomaowindmaomao
6,38711 gold badge2727 silver badges3333 bronze badges
Add a comment
Your Answer
Thanks for contributing an answer to Stack Overflow!Please be sure to answer the question. Provide details and share your research!But avoid …Asking for help, clarification, or responding to other answers.Making statements based on opinion; back them up with references or personal experience.To learn more, see our tips on writing great answers.
Draft saved
Draft discarded
Sign up or log in
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Submit
Post as a guest
Name
Email
Required, but never shown
Post as a guest
Name
Email
Required, but never shown
Post Your Answer
Discard
By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy
Not the answer you're looking for? Browse other questions tagged htmlvuejs2 or ask your own question.
The Overflow Blog
I spent two years trying to do what Backstage does for free
The complete guide to protecting your APIs with OAuth2 (part 1)
Featured on Meta
Navigation and UI research starting soon
2022 Community Moderator Election Results - now with two more mods!
Temporary policy: ChatGPT is banned
I'm standing down as a moderator
Related
1113
Adding HTML entities using CSS content
1379
How to align content of a div to the bottom
1633
<meta charset="utf-8"> vs <meta http-equiv="Content-Type">
1041
Can I set subject/content of email using mailto:?
1673
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
jQuery Adding / Removing classes on a button to hide elements
419
Disable input conditionally (Vue.js)
327
Can I pass parameters in computed properties in Vue.Js
VueJS modify parent Variable from child
How to Change Click Function into Hover/MouseOver Function
Hot Network Questions
What was the second platform supported by SAP?
Zero knowledge proofs that one has broken a crypto system
Table row to fill entire page
What does the qualifier NOMINAL exactly refer to?
how many moves does it take a knight to move 1 square forward
Is Evelyn pronounced variously based on gender?
US Citizen with dual nationality entering US on ESTA, what's the worst that can happen?
Keep elements in sequence that have a letter repeated at least 3 times
What happens if a US president is found to have engaged in insurrection after taking office?
Fuel for vehicles in an abruptly abandoned world
Did the crew lock themselves inside the LM on Apollo 13?
Property of Antiderivatives
Why can't I do two greps after a tail?
How useful is a third language for a Engineering scientific/academic career?
How can I make sure my Roll For Shoes character gets XP or new skills?
Identify my old motorbike
Fixed point theorem for the uncountable power of an interval
Why is this position -6.2 without a big material difference?
Where would the first nuke have been dropped in Germany?
Does Krypton or Xenon produce more thrust in a Hall-effect thruster?
Can one enforce a patent while it is only "pending approval"?
How does laptop 'limit battery charge' work?
Circular shape with sine edge
How (il)legal and common is it for a university to make one work BEFORE signing a contract?
more hot questions
Question feed
Subscribe to RSS
Question feed
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
lang-html
Stack Overflow
Questions
Help
Products
Teams
Advertising
Collectives
Talent
Company
About
Press
Work Here
Legal
Privacy Policy
Terms of Service
Contact Us
Cookie Settings
Cookie Policy
Stack Exchange Network
Technology
Culture & recreation
Life & arts
Science
Professional
Business
API
Data
Blog
Facebook
Twitter
LinkedIn
Instagram
Site design / logo 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA. rev 2022.12.21.43127
Your privacy
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Accept all cookies
Customize settings