英文:
composition-api and nuxt3 - i don’t have reactivity
问题
<template lang="pug">
div {{ isVisible }} !-- 响应性 OK，isVisible 从 false 切换到 true --!
</template>
<template lang="pug">
div {{ isVisible }} !-- 响应性不行，当我点击时 isVisible 始终为 false（但是通过 console.log，值会改变） --!
</template>
英文:
I have a nuxt code that works :
<template lang="pug">
div {{ isVisible }} !-- Reactivity OK, isVisible switch from false to true --!
</template>
<script>
export default {
data() {
return {
isVisible: false
}
},
computed: {
availableLocales() {
return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
}
},
methods: {
showDropdown() {
console.log(this.isVisible);
this.isVisible = !this.isVisible;
}
}
}
</script>
I try to convert it using composition-api but impossible: it doesn’t work.
I don’t have an error message but I feel like I don’t have responsiveness.
However, the console.log changes the value (but the value is not changed in the template)
<template lang="pug">
div {{ isVisible }} !-- Reactivity NOK, isVisible is always false when I click (but with a console.log, the value change) --!
</template>
<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() => {
return (locales.value).filter(i => i.code !== locale.value)
});
let isVisible = ref(false);
const showDropdown = () => {
console.log(isVisible);
isVisible = !isVisible;
}
</script>
答案1
得分: 1
你需要更改该行的代码：
isVisible = !isVisible;
为：
isVisible.value = !isVisible.value;
英文:
You need to change the line
isVisible = !isVisible;
to
isVisible.value = !isVisible.value
more info here: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论