Dynamic binding of property with Vue.compile Or late binding of v-model

Ref issue in github Add late binding feature? Show archive.org snapshot , I also needed a feature where I can bind to v-model after the vm class had mounted. The issue mentioned that it can be achieved with Vue.compile. I tried the approach in this stackoverflow Show archive.org snapshot , but I kept receiving error [Vue warn]: Property or method "payment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. After many hours, I managed to get it working.

In the HTML body:

<!-- some where in the HTML body -->
<div id="vCard2">
   <component :is="compiled"></component>
</div>

<script>
var vmCard2 = new Vue({
  el: '#vCard2',
  data: {
    compiled: null,
    status: ''
  },
  methods: {
    show: function () {
      // macro is some dynamic content or html template that contains mustache
      var macro = this.status == 'some_switch' ? '...{{payment.status}}...' : '...{{refund.status}}...';
      Vue.component('cp-macro', {
        data: function () {
          return {
            payment: vmCard1.payment,
            refund: vmCard1.refund
          }
        },
        template: '<span>'+macro+'</span>'
      })
      this.compiled = Vue.compile('<cp-macro></cp-macro>');
    },
    hide: function () {
      this.compiled = null; // must remove for the next macro to show
    }
  }
})
</script>

kiatng

Say thanks1

Last edit

2019-10-11

kiatng

Posted by kiatng to Vue.js (2019-10-11 06:42)