[Vuejs]-Parsing dynamically loaded directives in Vue

by

2👍

✅

After the post request returns you could create a new Vue instance, passing the html as the template and binding it to an element in your current Vue instance’s template:

<template>
  <div>
    <input type="text" class="form-control" v-model="value" @change="getResults" ></input>
    <div>
      <div id="results"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    getResults() {
      if (this.value.length < 3) {
        return;
      }
       
      this.$http.post('/ajax/search', { search: this.value }).then((response) => {
        new Vue({ el: '#results', template: response.body });       
      });
    }
  }
}
</script>

Or as @Bert pointed out, you could add a <component> tag to your template and pass its definition via the is prop:

<template>
  <div>
    <input type="text" class="form-control" v-model="value" @change="getResults" ></input>
    <component :is="results"/>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      value: '',
      results: null
    }
  },
  methods: {
    getResults() {
      if (this.value.length < 3) {
        return;
      }
       
      this.$http.post('/ajax/search', { search: this.value }).then((response) => {
        this.results = { template: response.body };       
      });
    }
  }
}
</script>
👤thanksd

Leave a comment