composition-api和nuxt3 - 我無法實現響應性
P粉014293738
P粉014293738 2023-09-09 08:45:14
0
1
480

我有一個可以工作的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>

P粉014293738
P粉014293738

全部回覆(1)
P粉143640496

你需要將以下行進行更改

isVisible = !isVisible;

更改為

isVisible.value = !isVisible.value

更多資訊請參考:https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板