TypeError: Cannot read property '0' of undefined VueJS

Question

I am seeing a strange issue with VueJS and HTML un/ordered list elements. All files build in my project without any errors but in browser you see nothing on the page and there is an error in browser Console.

I have a fix (see below code), but am curious as to why VueJS throws this error and how VueJS handles basic list elements in the browser? So I was hoping someone could explain this issue to me to fully understand what is really happening here.

I'm using Visual Studio 2019 with Snowpack to compile

My html/template code:

<!-- The code that throws error in the browser -->
<ul>
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
</ul>

<!-- This code fixes error in browser -->
<ul :key="someRandomKey"> <!--<ul v-bind:id="someRandomKey"> also a fix-->
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
</ul>

My Vue Component ts code:

import { Component, Prop, Vue } from '/web_modules/vue-property-decorator.js'

import vevraTemplate from '../templates/applyVEVRAA.vue.js';
@Component({ render: vevraTemplate, watch: null })
export default class VEVRAAComponent extends Vue
{
    
}

The error: (My vue component name is 'applyVEVRAA.vue.js')

I had other elements, but removed them and tested with the only thing on my .vue page is the unordered list. So no, it is not inside a v-for or transition-group — jlking, Jul 24 '20 at 17:35
Could you post the complete code? There's no reason an unordered list by itself would need a key attribute as far as I know — Daniel_Knights, Jul 24 '20 at 17:39

score 0 · Answer 1 · answered Jul 24 '20 at 17:27

0

You add a key to the 'parent' element so it can get identified by Vue renderer. If something gets changed, the render knows what elements need to be updated.

In this link, it is explained better -> https://www.telerik.com/blogs/in-vue-when-do-i-actually-need-the-key-attribute-and-why.

answered Jul 24 '20 at 17:27

Manuela Mercado

26
5

I understand that, but its not just about the key attribute. If I update the code to be `
– jlking Jul 24 '20 at 17:40
The `id` acts also as identification for Vue JS rendering. I'm wondering if you use `` tag for enclosing the template code or if that is all the code. – Manuela Mercado Jul 24 '20 at 21:04
All of my code is posted above. Literally the only code I have is the unordered list :-\ – jlking Jul 26 '20 at 03:31
I think you are missing `syntax`, like to enclose the template in `template` tag to let Vue knows, maybe this could help -> https://vuejs.org/v2/guide/typescript.html. – Manuela Mercado Aug 17 '20 at 12:25

TypeError: Cannot read property '0' of undefined VueJS

1 Answers1