简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Vue <script settings> reactivity not working
P粉029327711
P粉029327711 2023-09-05 18:07:35
0
1
351
<p>I'm trying out the <code><script setup></code> syntax in vue and wondering why reactivity isn't working. What's wrong here? </p> <pre class="brush:js;toolbar:false;"><template> <button @click="changeButtonText">{{ buttonText }}</button> </template> <script setup> import { ref } from 'vue' let buttonText = ref("Foo") function changeButtonText() { buttonText = "Bar" } </script> </pre> <p>Try without using ref(). Try using <code>buttonText = ref("Bar")</code>. No effect</p>
P粉029327711
P粉029327711

reply all(1)
P粉518799557
P粉5187995572023-09-06 15:49:26 1 floor

In your function you have to change buttonText = "Bar" to buttonText.value="Bar"

For more information about reactivity, see: https://vuejs.org/api/reactivity-core.html#ref

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！