Vue.js技术问题：组件挂载时如何追加带点击事件的HTML元素

Hey there! Let's tackle this problem you're having with adding clickable buttons when your Vue component mounts. The key issue here is that directly putting Vue directives like @click into an HTML string (like your game.button field) won't work—Vue doesn't compile raw HTML strings inserted via v-html or manual DOM insertion, so the click event won't be bound properly.

Here are two solid approaches to fix this:

1. Use Vue's Reactive List Rendering (Recommended) #

This is the most Vue-idiomatic way—instead of building HTML strings, maintain a reactive array of button data and render them with v-for. It's cleaner, safer, and fits with Vue's reactive system.

<template>
  <div>
    <!-- Render buttons from the reactive array -->
    <button 
      v-for="(btn, index) in game.buttons" 
      :key="index" 
      @click="btn.onClick"
    >
      {{ btn.text }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show_word: true,
      game: {
        type: 1,
        name: "Symbols",
        start: false,
        total_combo: 0,
        total_correct: 0,
        total_incorrect: 0,
        total_correct_in_a_row: 0,
        max_correct_in_a_row: 0,
        correct_percent: 0,
        avg_time_for_ans: 0,
        score_plus: 0,
        score_multi: 0,
        d_timer: 600,
        finish: false,
        positive: null,
        negative: null,
        buttons: [] // Reactive array to hold button data
      }
    };
  },
  mounted() {
    // Add buttons when the component mounts
    this.game.buttons.push({
      text: "click",
      onClick: this.checkNumbers
    });

    // You can add more buttons easily
    this.game.buttons.push({
      text: "Another Action",
      onClick: () => {
        console.log("Second button clicked!");
      }
    });
  },
  methods: {
    checkNumbers() {
      console.log("Check numbers triggered!");
      // Your business logic here
    }
  }
};
</script>

2. Manual DOM Manipulation (Not Recommended, But For Edge Cases) #

If you absolutely need to build buttons via raw HTML (avoid this if possible—it bypasses Vue's reactivity and has XSS risks), you can create elements manually and bind events with vanilla JS:

<template>
  <div ref="buttonContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      show_word: true,
      game: {
        // Your existing game properties...
        type: 1,
        name: "Symbols",
        // ... rest of your fields
      }
    };
  },
  mounted() {
    // Create first button
    const clickButton = document.createElement("button");
    clickButton.textContent = "click";
    clickButton.addEventListener("click", this.checkNumbers);
    this.$refs.buttonContainer.appendChild(clickButton);

    // Create a second button
    const anotherButton = document.createElement("button");
    anotherButton.textContent = "Extra Button";
    anotherButton.addEventListener("click", () => {
      alert("Extra button clicked!");
    });
    this.$refs.buttonContainer.appendChild(anotherButton);
  },
  methods: {
    checkNumbers() {
      console.log("Check numbers triggered!");
      // Your business logic here
    }
  }
};
</script>

Why the First Approach is Better #

• It leverages Vue's reactivity, so any changes to the buttons array will automatically update the DOM.
• It's easier to maintain, debug, and extend (adding/removing buttons is just updating the array).
• It avoids XSS vulnerabilities that come with inserting raw HTML strings.

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