Render Template and Get as String

by choasia

HTML

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <api v-show="false" :place="place"></api>
</div>

JavaScript

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('solution 1', this.$children[0].$el.innerHTML);
    //=> <div class="popup"><a href="#/places/1" class=""><h5>awesome-name</h5> <p>somewhere</p></a></div>
    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('solution 2', comp.$el.innerHTML);
    //=> <div class="popup"><a href="#/places/1" class=""><h5>awesome-name</h5> <p>somewhere</p></a></div>
  },
});