Vue.js bind ajax загружает обработчики кликов v-on

Question

Я работаю над проектом, в котором много загруженных AJAX-фрагментов HTML. Я хочу постепенно представить Vue.js, где я могу. Я не пытаюсь асинхронно загрузить какие-либо определения компонентов или javascript, но я бы хотел загрузить фрагмент HTML, имеющий привязку v-on:click, например:

<button class="btn btn-primary" v-on:click="showModal=true">
    Show Modal Dialog
</button>

В любом случае vuejs может анализировать фрагменты html, которые приходят из jQuery, и считывать атрибуты v- *?

Answer 1

Вы можете использовать <v-runtime-template> для загрузки строк шаблона Vue во время выполнения:

<template>
  <div id="app">
    <template v-if="template">
      <v-runtime-template :template="template"></v-runtime-template>
    </template>
    <div v-else>Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      template: ''
    }
  },
  mounted() {
    this.template = this.getVueTemplateFromServer();
  },
  methods: {
    getVueTemplateFromServer() { /*...*/ }
  }
}
</script>

demo