如何在Vue.js中添加额外JS脚本？Laravel+Vue项目Checkbox样式脚本问题

Hey there! Let's figure out why that checkbox styling script isn't working in your Vue.js admin panel (built on Laravel) and fix it up. The core issue here is that Vue's template compilation and DOM rendering flow doesn't play nicely with inline <script> tags, and your script is likely running before the Vue-rendered checkboxes even exist in the DOM. Here are a few practical solutions tailored to your setup:

1. Move your script logic into Vue's lifecycle hooks #

Vue provides lifecycle hooks that run after the component's DOM has been mounted or updated—perfect for initializing DOM-dependent scripts.

Let's say your original styling script looks something like this (a common pattern for custom checkboxes):

function initCustomCheckboxes() {
  document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
    // Wrap checkbox in a custom container
    const wrapper = document.createElement('div');
    wrapper.className = 'checkbox-custom-wrapper';
    checkbox.parentNode.insertBefore(wrapper, checkbox);
    wrapper.appendChild(checkbox);
    
    // Add click handlers and style classes
    wrapper.addEventListener('click', () => {
      checkbox.checked = !checkbox.checked;
      wrapper.classList.toggle('checked', checkbox.checked);
    });
  });
}

You can run this function directly in your component's mounted hook (for one-time initialization) or updated hook (if you have dynamically rendered checkboxes via v-for):

<template>
  <div class="form-group m-form">
    <!-- Your checkboxes here, with the "custom-checkbox" class -->
    <input type="checkbox" class="custom-checkbox" v-model="checkbox1" />
    <input type="checkbox" class="custom-checkbox" v-model="checkbox2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false
    };
  },
  mounted() {
    // Run the styling script after the component mounts
    this.initCustomCheckboxes();
  },
  updated() {
    // Re-run if checkboxes are added/removed dynamically
    this.initCustomCheckboxes();
  },
  methods: {
    initCustomCheckboxes() {
      const checkboxes = document.querySelectorAll('.custom-checkbox');
      checkboxes.forEach(checkbox => {
        // Skip already wrapped checkboxes to avoid duplicates
        if (checkbox.parentNode.classList.contains('checkbox-custom-wrapper')) return;
        
        // Your original script logic here
        const wrapper = document.createElement('div');
        wrapper.className = 'checkbox-custom-wrapper';
        checkbox.parentNode.insertBefore(wrapper, checkbox);
        wrapper.appendChild(checkbox);
        
        wrapper.addEventListener('click', () => {
          checkbox.checked = !checkbox.checked;
          wrapper.classList.toggle('checked', checkbox.checked);
          // Trigger Vue's input event to sync with v-model
          checkbox.dispatchEvent(new Event('input'));
        });
      });
    }
  }
};
</script>

2. Use a Vue Custom Directive (cleaner, reusable approach) #

For a more "Vue-native" solution, wrap your styling logic in a custom directive. This lets you apply the style directly to checkbox elements with a simple attribute:

<template>
  <div class="form-group m-form">
    <!-- Apply the custom directive to your checkboxes -->
    <input type="checkbox" v-custom-checkbox v-model="checkbox1" />
    <input type="checkbox" v-custom-checkbox v-model="checkbox2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false
    };
  },
  directives: {
    'custom-checkbox': {
      inserted(el) {
        // el = the checkbox element, inserted into the DOM
        const wrapper = document.createElement('div');
        wrapper.className = 'checkbox-custom-wrapper';
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);

        // Sync wrapper state with checkbox
        wrapper.classList.toggle('checked', el.checked);
        
        // Handle clicks and sync v-model
        wrapper.addEventListener('click', () => {
          el.checked = !el.checked;
          wrapper.classList.toggle('checked', el.checked);
          el.dispatchEvent(new Event('input'));
        });

        // Listen for programmatic changes to the checkbox
        el.addEventListener('change', () => {
          wrapper.classList.toggle('checked', el.checked);
        });
      }
    }
  }
};
</script>

3. Ditch raw DOM scripts entirely (most Vue-friendly) #

If possible, rewrite the styling using Vue's reactive features instead of raw JS. This avoids DOM manipulation altogether and plays perfectly with Vue's reactivity system:

<template>
  <div class="form-group m-form">
    <label class="checkbox-label" v-for="(item, index) in checkboxItems" :key="index">
      <input type="checkbox" v-model="item.checked" class="hidden-checkbox" />
      <span class="custom-checkbox" :class="{ checked: item.checked }"></span>
      {{ item.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxItems: [
        { label: 'Option 1', checked: false },
        { label: 'Option 2', checked: true }
      ]
    };
  }
};
</script>

<style scoped>
.hidden-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 8px 0;
}

.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
  transition: all 0.2s ease;
}

.custom-checkbox.checked {
  background-color: #2563eb;
  border-color: #2563eb;
  position: relative;
}

.custom-checkbox.checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

Key Notes #

• If you're using a third-party styling script (like a jQuery plugin), import it into your component or your main app.js file, then initialize it in the appropriate Vue lifecycle hook.
• Always make sure your script runs after the checkboxes are rendered in the DOM—this is why mounted/updated hooks or custom directives work so well.

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