[Vuejs]-Vue.js – watch when disabled element and return data

by

0👍

First of all if you are using Vue.js then try to avoid the vanilla javascript by that i mean you should not use the document.querySelector etc..

<head>
    <link rel="stylesheet" href="themedark.css" :disabled="themeLight">        
    <link rel="stylesheet" href="themelight.css" :disabled="!themeLight">
</head>

<body>
    <button @click="themeToggle"></button>
</body>

<script>
export default {
    data: () => ({
        themeLight: true
    }),
    methods: {
        themeToggle() {
            this.themeLight = !this.themeLight
        }
    }
}
</script>

Now you do not need to monitor changed in the themeLight variable since you are changing it yourself on the button click
If the above code do not works than notify me, i have another solution.

0👍

Your use case seems weird to me, but you can use computed property.

  computed: {
    themeLight: function () {
        return window.themeLight.disabled
    }
  }

0👍

Enhance your watch method and prevent it to be blocked for infinite loop.
It is a good practice to compare newValue with the oldValue.

watch: {
    themeLight(newValue, oldValue) {
         if(newValue && newValue!=oldValue) {
            this.currentTheme();
         }
    }
}

Leave a comment