vue.js - vue router's router-link in google maps infowindow -


i've got working fine, except i've instead of <a> tag use <router-link> tag because of <a> tag unlike <router-link> (which intercepts click event , don't reload page) reloads page.

const contentstring = `     <div class="popup">         <a href="/places/${place._id}">             <img src="..." />             <h5>${place.name}</h5>             <p>${place.gmap.address}</p>         </a>     </div>`  const infowindow = new google.maps.infowindow() infowindow.setcontent(contentstring) 

if replace <a> tag <router-link> doesn't render <a> tag if <router-link> in vuejs template.

you right. router-link wasn't rendered because vue.js got no chance render it. can let vue.js render template @ first, rendered result string using innerhtml, , pass string google maps api(setcontent).

i'd provide 2 solutions here.

  1. the first 1 easy read , understand. use normal component, add v-show="false" in tag won't appear in view. (place can passed prop)

    <div id="app">   <api v-show="false" :place="place"></api> </div> 

    vue instance:

    new vue({   router: new vuerouter({}),   el: '#app',   data: {     place: {       id: 1,       name: 'awesome-name',       address: 'somewhere',     }   },   components: {     api: {       props: [ 'place' ],       template: `         <div class="api">         <div class="popup">           <router-link :to="'/places/' + place.id">             <h5>{{place.name}}</h5>             <p>{{place.address}}</p>                     </router-link>         </div>         </div>       `,     },   },   mounted() {     console.log(this.$children[0].$el.innerhtml);     //=> <div class="popup"><a href="#/places/1" class=""><h5>awesome-name</h5> <p>somewhere</p></a></div>   }, }); 
  2. if don't want pollute html, can generate component's vm programmatically using vue.extend, create virtual dom, mount vm created dom.

    const mycomp = vue.extend({   router: this.$options.router,   template: `     <div class="api">     <div class="popup">       <router-link to="/places/${this.place.id}">         <h5>${this.place.name}</h5>         <p>${this.place.address}</p>                 </router-link>     </div>     </div>   `, }); const comp = new mycomp().$mount(document.createelement('div')); console.log(comp.$el.innerhtml); //=> <div class="popup"><a href="#/places/1" class=""><h5>awesome-name</h5> <p>somewhere</p></a></div> 

i combined solutions above in fiddle, please have look.


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -