我有一个可以工作的Nuxt代码:
<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会改变值(但是在模板中值没有改变)
<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>
你需要将以下行进行更改
更改为
更多信息请参考:https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref