掛載腳本未在vuejs中加載

我有一個腳本可以切換暗模式組件，我已將其添加到公共檔案夾中的 index.html 檔案中。決定將它移到我的視圖本身并在安裝時渲染。不確定我是否做得正確，因為一旦切換它就不會更改為暗模式。

這是我添加到 public 檔案夾中的 index.html 的初始腳本：

  const checkbox = document.querySelector('#checkbox');
  const html = document.querySelector('html');

  const toggleDarkMode = function () {
    checkbox.checked
      ? html.classList.add('dark')
      : html.classList.remove('dark');
  }

  toggleDarkMode();
  checkbox.addEventListener('click', toggleDarkMode);

在這里，我將它移動到我的視圖并在安裝后加載：

<script>
import Darkmode from '../components/Darkmode.vue';
import Footer from '../components/Footer.vue';

export default {
  name: 'About',
  components: {
    Darkmode,
    Footer,
  },
  mounted() {
    const checkbox = document.querySelector('#checkbox');
    const html = document.querySelector('html');

    const toggleDarkMode = () => (
      checkbox.checked ? html.classList.add('dark') :
        html.classList.remove('dark')
    );
    toggleDarkMode();
  },
};
</script>

這里僅供參考的是用于切換模式的 DarkMode.vue 組件：

<template>
    <div class="rounded-lg flex bg-gray-600 items-center justify-center mx-auto absolute top-1 right-0 left-3/3 mt-2 mr-2 z-50">
        <span class="text-md font-extralight">
            <i class="fas fa-sun"></i>
        </span>
        <div>
            <input class="hidden" id="checkbox" name="" type="checkbox"/>
            <label class="cursor-pointer" for="checkbox">
                <div class="w-9 h-5 flex items-center bg-gray-300 rounded-full p2">
                    <div class="w-4 h-4 bg-white rounded-full shadow switch-ball"></div>
                </div>
            </label>
        </div>
        <span class="text-xs font-semibold">
            <i class="fas fa-moon"></i>
        </span>
    </div>
</template>

<script>

export default {
  name: 'Darkmode',
  props: {
    msg: String,
  },
};

</script>

我是不是遺漏了什么，或者這應該有效嗎？

uj5u.com熱心網友回復：

據我了解，如果您打算在激活復選框時觸發暗模式，那么將邏輯放在諸如 mount 之類的生命周期事件中對您來說沒有多大意義。您可以嘗試使用 v-model 并觀看：

<template>
    <div class="rounded-lg flex bg-gray-600 items-center justify-center mx-auto absolute top-1 right-0 left-3/3 mt-2 mr-2 z-50">
        <span class="text-md font-extralight">
            <i class="fas fa-sun"></i>
        </span>
        <div>
            <input v-model="checkboxOn" class="hidden" id="checkbox" name="" type="checkbox"/>
            <label class="cursor-pointer" for="checkbox">
                <div class="w-9 h-5 flex items-center bg-gray-300 rounded-full p2">
                    <div class="w-4 h-4 bg-white rounded-full shadow switch-ball"></div>
                </div>
            </label>
        </div>
        <span class="text-xs font-semibold">
            <i class="fas fa-moon"></i>
        </span>
    </div>
</template>
<script>
import Darkmode from '../components/Darkmode.vue';
import Footer from '../components/Footer.vue';

export default {
  name: 'About',
  components: {
    Darkmode,
    Footer,
  },
  data: () => ({
    checkboxOn: 0,
    }),
  watch:{
    toggleDarkMode(){
      // This isn't a 'vue-style' procedure. I think you should try to communicate with your darkmode.vue component using Vuex, event bus, props...
      this.checkboxOn ? document.querySelector('html').classList.add('dark') :
      document.querySelector('html').classList.remove('dark')
    }
  }
};
</script>

標籤：javascript Vue.js

上一篇：Vue.js更新方法中的變數不起作用

下一篇：如果在執行期間更新依賴項，計算屬性是否會停止計算？