Home  >  Q&A  >  body text

Vue <script settings> reactivity not working

<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粉029327711P粉029327711409 days ago348

reply all(1)I'll reply

  • P粉518799557

    P粉5187995572023-09-06 15:49:26

    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

    reply
    0
  • Cancelreply