How to save data from Sanity as a JS variable (then an array) to use in Nuxt 3 template? | Nuxt | Page 1

#

See example below:

#

This snippet returns "Cannot read properties of undefined (reading 'messageSanity1')"

// pages/index.vue

<script setup>
const query = groq`*[_type == 'messages'] {...}`;
const { data } = useSanityQuery(query);

var text = "pretext"
var message1 = text + data.messages.messageSanity1;
var message2 = text + data.messages.messageSanity2;
var message3 = text + data.messages.messageSanity3;

var messageArray = [message1, message2, message3];
var count = -1;

function message() {
  var elements = document.getElementsById("clickable");

  for (var i = 0, len = elements.length; i < len; i++) {
    alert(messageArray[++count % messageArray.length]);
  }
}
</script>

<template>
  <div id="clickable" @click="message"></div>
</template>

#

How to save data from Sanity as a JS variable (then array) to use in Nuxt 3 template?

#

How to save data from Sanity as a JS variable (then an array) to use in Nuxt 3 template?

#

I am able to access it directly in the template as below:

<template>
  <div v-for="messages in data">
    Text here: {{ messages.messageSanity1 }}
  </div>
</template>

#How to save data from Sanity as a JS variable (then an array) to use in Nuxt 3 template?