如何让Vue.js将Ajax加载的内容识别为应用自身的一部分

Got it, let's break this down for you. The core issue here is that v-html only injects raw HTML into the DOM—it doesn't compile any Vue directives (like v-on:click) or components inside that content. Vue compiles its template once during initialization, so dynamically added HTML from AJAX won't be picked up as part of the Vue app by default.

Here are your solutions, ordered by best practice:

1. Best Approach: Return Data from PHP, Not HTML #

Vue is designed to be data-driven, so the cleanest solution is to have your PHP endpoint return JSON data instead of pre-rendered HTML. Then you can use Vue's template system to render that data, which will automatically process all directives.

Example: #

PHP (/tmp/page.php)

<?php
echo json_encode([
  "buttonText" => "Click Me!",
  "message" => "You clicked the AJAX-loaded button!"
]);
?>

Vue Code

new Vue({
  el: '#app',
  data: {
    pageData: {}
  },
  methods: {
    runAjax() {
      axios.get('/tmp/page.php').then(response => {
        this.pageData = response.data;
      });
    },
    handleButtonClick() {
      alert(this.pageData.message);
    }
  },
  mounted() {
    this.runAjax();
  }
});

HTML

<div id="app">
  <div class="ajax-wrapper">
    <!-- Vue will compile this template, so v-on:click works -->
    <button v-on:click="handleButtonClick">{{ pageData.buttonText }}</button>
  </div>
</div>

This keeps your code organized, leverages Vue's data-binding strengths, and avoids security risks like XSS (since you're not injecting raw HTML).

2. If You Must Load HTML Templates: Manual Compilation #

If you absolutely need to load HTML with Vue directives from your server (e.g., complex templates you can't easily convert to data), you can manually compile the HTML and mount it to your Vue app. Note: Only do this if you trust the source of the HTML—raw HTML injection carries XSS risks.

Example: #

new Vue({
  el: '#app',
  methods: {
    runAjax() {
      axios.get('/tmp/page.php').then(response => {
        // Compile the HTML string into a Vue render function
        const compiled = Vue.compile(response.data);
        
        // Create a child component with the compiled template and required methods
        const dynamicComponent = {
          render: compiled.render,
          staticRenderFns: compiled.staticRenderFns,
          methods: {
            // Define any methods used in the loaded HTML
            handleClick() {
              alert('Clicked from AJAX content!');
            }
          }
        };
        
        // Mount the component to the .ajax-wrapper element
        new Vue(dynamicComponent).$mount('.ajax-wrapper');
      });
    }
  },
  mounted() {
    this.runAjax();
  }
});

Sample PHP HTML (/tmp/page.php)

<button v-on:click="handleClick">Click Me (From PHP)</button>

3. Alternative: Use Dynamic Components #

Another option is to register the loaded HTML as a dynamic Vue component and render it using the <component> element. This is similar to manual compilation but integrates more cleanly with your main Vue app.

Example: #

new Vue({
  el: '#app',
  data: {
    dynamicContentComponent: null
  },
  methods: {
    runAjax() {
      axios.get('/tmp/page.php').then(response => {
        // Register a dynamic component with the loaded HTML
        this.dynamicContentComponent = Vue.component('dynamic-content', {
          template: response.data,
          methods: {
            handleClick() {
              alert('Dynamic component click!');
            }
          }
        });
      });
    }
  },
  mounted() {
    this.runAjax();
  }
});

HTML

<div id="app">
  <!-- Render the dynamic component once it's loaded -->
  <component v-if="dynamicContentComponent" :is="dynamicContentComponent"></component>
</div>

内容的提问来源于stack exchange，提问作者rolfo85