composition-api和nuxt3 - 我無法實現響應性
我有一個可以工作的Nuxt程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <template lang= "pug" >
div {{ isVisible }} !-- 响应性正常,isVisible从false切换到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>
|
我嘗試使用composition-api進行轉換,但是不可能:它不起作用。
我沒有錯誤訊息,但我感覺沒有響應性。
然而,console.log會改變值(但是在範本中值沒有改變)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template lang= "pug" >
div {{ isVisible }} !-- 响应性不正常,当我点击时isVisible始终为false(但是通过console.log,值会改变) --!
</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>
|