搜尋

首頁  >  問答  >  主體

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>

P粉014293738P粉014293738560 天前579

全部回覆(1)我來回復

  • P粉143640496

    P粉1436404962023-09-10 07:17:06

    你需要將以下行進行更改

    1

    isVisible = !isVisible;

    更改為

    1

    isVisible.value = !isVisible.value

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

    回覆
    0
  • 取消回覆