I have a simple Vue 3 app with Vite that calls a Google sheets for data. I am missing something about reactivity in Vue 3. The following works fine
<template>
<div v-if="ssData">{{ ssData.values[0][2] }}</div>
</template>
<script setup>
// Fetch the SS data
const { data: ssData } = useFetch(ssURL);
</script>
The template updates with the data once fetch completes. But I want the user to retrieve data on button click:
<template>
<h1>Senior Options</h1>
<button @click="getSSValues">Get Data</button>
<div v-if="ssData">{{ ssData.values[0][2] }}</div>
</template>
<script setup>
let ssData = ref(null);
const getSSValues = () => {
// eslint-disable-next-line no-unused-vars
const { data } = useFetch(ssURL);
ssData.value = data;
};
</script>
This does not update the template when data is retrieved. I looked in Vue Devtools and I see the ssData
object has data in it, so I am assuming I must be doing something wrong in terms of my understanding of reactivity.
How does one use a reactive variable from within a function so reactivity is maintained and template gets updated?