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

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

nginx - phpPgAdmin - log in works but I have to login again after clicking on any links -

i have setup postgres 9.6 , phppgadmin on centos 7 server nginx, i can log in phppgadmin, postgresql server on right of page remains crossed out , link try browse (databases, roles etc) requires log in again. i'm thinking seems sessions problem, unsure how resolve it. any pointers on how fix or should looking @ in order track down problem? solved. turns out owner of /var/lib/php/session apache - needed nginx. sorted changing ownership nginx below: chown -r nginx:nginx /var/lib/php/session/
Read more