[Vuejs]-Is there a way to forcefully compile or render component using text inside interpolation handlebars

by

0👍

Actually, I don’t think it is a wrong way (primarily option-based). And the sample you posted out is use Mustache, it will replace the value property of one dom element.

As the Vue Guide said:

The mustache tag will be replaced with the value of the msg property
on the corresponding data object. It will also be updated whenever the
data object’s msg property changes.

Though we can update innerHTML directly by v-html directive. But I don’t think you will get any benefit, if uses v-html, why not directly uses your child component.

Vue.component('child', {

  template: '<div><span style="background-color:green">{{ updatedArray }}</span><div style="background-color:red">{{computedArray}}</div></div>',
  props: ['updatedArray'],
  computed: {
    computedArray() {
      if(this.updatedArray.item.length > 0) {return this.updatedArray}
      else {return "other item"}
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      testArray: {
        'item': 'test',
        'prop1': 'a'
      },
      childComponent1: '<div>Nothing</div>',
      childComponent2: '<div>Nothing</div>'
    }
  },
  methods:{
    resetArray: function() {
      this.testArray['item'] += this.testArray['prop1'] + 'b'
      this.childComponent1 = this.$refs.test.$el.innerHTML
      setTimeout(()=>{this.childComponent2 = this.$refs.test.$el.innerHTML}, 0)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button v-on:click="resetArray()">Click me</button>
<child ref="test" v-bind:updated-array="testArray"></child>
<div v-html="childComponent1"></div>
<div v-html="childComponent2"></div>
</div>

Leave a comment