I've got a Nuxt code snippet that is functioning correctly:
<template lang="pug">
div {{ isActive }} !-- Reactivity is working fine, isActive switches from false to true --!
</template>
<script>
export default {
data() {
return {
isActive: false
}
},
computed: {
availableLanguages() {
return this.$i18n.languages.filter(l => l.code !== this.$i18n.language)
}
},
methods: {
showDropdown() {
console.log(this.isActive);
this.isActive = !this.isActive;
}
}
}
</script>
I attempted to convert it using the composition API but encountered issues: it's not working.
There are no error messages, but it seems like there is no reactivity.
Even though the console.log shows the value changing (the template doesn't reflect the change)
<template lang="pug">
div {{ isActive }} !-- Reactivity issue, isActive always stays false when clicked (console log shows value changes) --!
</template>
<script setup>
const { language, languages } = useI18n()
const switchLanguagePath = useSwitchLocalePath()
const availableLanguages = computed(() => {
return (languages.value).filter(l => l.code !== language.value)
});
let isActive = ref(false);
const showDropdown = () => {
console.log(isActive);
isActive = !isActive;
}
</script>