Simple array in Nuxt 3 / Vue 3

Question

I'm trying to display a very simple array in the template. I can't get my head around why this does not work.

I get the data with a try/catch statement. The data is JSON and it has an array inside, so I guess that clarifies as multilevel array.

The constant displays correctly in console.log, but not in the template.

Trying to display the data

<template>

<!-- This doesn't return anything -->

{{modules}}

<!-- Neither does this -->

<span v-for="(item, index) in modules" :key="index">{{item}}</a>

<!-- This works as it should -->

<li v-for="company in companies" :key="companies.company_name">                

{{ company.company_name }}
{{ company.app_modules }}

<pre>{{ company }}</pre>

</li>

</template>

Get the data

const companies = ref([])

try {

// Await and get the data

  companies.value = data
  const modules = data[0].app_modules

  // This logs the array
  console.log(modules)

} catch (e) {
  console.error(e)
}

The "modules" Array is this simple

[
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9"
]

Learn first Vue 3 then learn Nuxt3 you lack of basics of Vue 3. — Mises, Nov 14 '22 at 16:07
What is `companies` here? What are you awaiting? What do you see in your Vue devtools? Please provide a [repro]. — kissu, Nov 14 '22 at 16:27

score 0 · Answer 1 · answered Nov 15 '22 at 22:57

There are a couple of issues with your code.

I assume you're using script setup.

First, const modules has a scope only inside try catch block. It is not visible outside of it, and hence you cannot use it in a template as it is undefined. If you tried to console.log(modules) outside of try catch block, it would print undefined.

script setup will implicitly export all of the variables and functions defined in its scope, however variables inside functions or try...catch block won't be returned as their scope is not on root level.

On a similar note, If you're using setup() {} there you explcitly return things you want visible in template.

To solve this problem I'd create a ref, in a same way you did with companies and assign to it in the try catch block.

modules.value = data[0].app_modules

or, you could use let modules outside of try catch block and assign to it there.

let modules;

try {
    modules = data[0].app_modules
} catch (e) {
}

Second, you're not closing a <span> element with </span>, but </a>.

Fixing both issues should render things correctly.

Thanks @Nikola! I figured it out myself and did it the way you suggested in the second example: so with `let`, not `const`. And yes, the span is not closed as it should in my example. There's a bunch of HTML around it so I deleted the `` by mistake and left the `` Here's also an answer to the question: https://stackoverflow.com/questions/43090614/how-use-const-in-try-catch-block — MaxPower, Nov 16 '22 at 23:18

score -1 · Answer 2 · answered Nov 14 '22 at 20:03

-1

Well, the thing is that you can't have "const" inside try block.

I know this was a hasty example, but there's a bunch of code and I was trying to get the point through without all the distracting things.

Sorry for the inconvenience :D

answered Nov 14 '22 at 20:03

MaxPower

31
6

You can have `const` in try tach block. – Mises Nov 14 '22 at 20:10
Problem is you have no ` – Mises Nov 14 '22 at 20:12

Simple array in Nuxt 3 / Vue 3

2 Answers2