Vue中为v-html渲染的子元素添加类名的技术问询

Hey there! Let's fix that frustrating issue where your button classes are landing on the outer div instead of the button itself. Here are a few clean, Vue-friendly approaches to solve this:

1. Pass Classes Directly to the Builder Component (Best Practice) #

If you control the Builder component's code, this is the most elegant solution. Modify the Builder to accept a class prop and bind it directly to the button element, ditching the unnecessary wrapper div that's capturing your classes:

<!-- Builder.vue -->
<template>
  <!-- Bind incoming classes straight to the button -->
  <button :class="buttonClasses" v-html="buttonContent"></button>
</template>

<script>
export default {
  props: {
    buttonClasses: {
      type: String,
      default: ""
    },
    buttonContent: {
      type: String,
      required: true
    }
  }
};
</script>

Then use it in your parent component like this:

<Builder 
  buttonClasses="doc_button doc_button--green" 
  buttonContent="<span>Click Me</span>" 
/>

This way, classes are applied directly to the button from the get-go, no extra elements messing with your styles.

2. Render v-html Directly on the Button Element #

If the Builder component isn't strictly necessary for this use case, cut out the middleman and apply v-html directly to the button itself:

<button 
  class="doc_button doc_button--green" 
  v-html="buttonContent"
></button>

This ensures your classes are attached to the button right from the start, with zero DOM manipulation required.

3. Fix Your Mounted Hook DOM Manipulation (Last Resort) #

If you can't modify the component structure for some reason, your initial mounted hook likely failed because the v-html content wasn't fully rendered yet. Use $nextTick to wait for the DOM to update before making changes:

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      // Target your outer div (adjust the selector to match your actual code)
      const wrapperDiv = document.querySelector(".builder-container");
      const button = wrapperDiv.querySelector("button");
      
      if (button) {
        // Move all classes from the div to the button
        button.classList.add(...wrapperDiv.classList);
        // Remove classes from the div if you don't want them there
        wrapperDiv.classList.remove(...wrapperDiv.classList);
      }
    });
  }
};
</script>

Note: This is a workaround—stick to the first two methods if possible, as direct DOM manipulation should be avoided in Vue when component-based solutions exist.

内容的提问来源于stack exchange，提问作者Grégory Huyghe