composition-api et nuxt3 - je n'arrive pas à atteindre la réactivité

Question

J'ai un code Nuxt fonctionnel :

<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>

J'ai essayé d'utiliser composition-api pour convertir, mais ce n'est pas possible : ça ne fonctionne pas.

Je ne reçois pas de messages d'erreur, mais je ne réponds pas.

Cependant, console.log change la valeur (mais dans le modèle la valeur ne change pas)

<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>

Answer 1

Vous devez modifier les lignes suivantes

isVisible = !isVisible;

changé en

isVisible.value = !isVisible.value

Pour plus d'informations, veuillez vous référer à : https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref