Vue <script settings> reactivity not working
P粉029327711
2023-09-05 18:07:35
<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>
In your function you have to change
buttonText = "Bar
" tobuttonText.value="Bar"
For more information about reactivity, see: https://vuejs.org/api/reactivity-core.html#ref