I am struggling with populating a list in my Vue 3 app using a validated JSON file containing all the languages of the world. My lack of experience is making it difficult for me to access the inner parts of an object, so I need some guidance on that.
JSON file (abbreviated):
[
{ "code": "ab", "name": "Abkhaz", "nativeName": "аҧсуа" },
{ "code": "aa", "name": "Afar", "nativeName": "Afaraf" },
{ "code": "af", "name": "Afrikaans", "nativeName": "Afrikaans" },
// more language objects
]
This is the part of my Vue app code where I import the JSON file and try to populate a div:
<script setup>
import { ref } from "vue";
import languages from '@/store/languages.json'
const allLanguages = ref([languages])
</script>
Here is the specific section in my Vue app responsible for displaying the languages:
<div class="selectLanguageWrap relative" v-if="fields.searching">
<div class="selectLanguages absolute">
<div
v-for="language in allLanguages"
:key="language.id"
:value="language.id"
class="languageOption flex"
>
<input type="checkbox" name="" id="" value="" />
<h4>{{ language.name }}</h4>
</div>
</div>
</div>
When I console.log the response, I see the following output: https://i.sstatic.net/7CcUW.png
I would like help understanding how to correctly access the name property within the inner array. As a beginner, I'm not sure if I should use languages._rawValue.name or ['name']. Any insights on what mistake I might be making and why the complete list of languages is not showing up in the div would be greatly appreciated.