Things I Like Right Now
Mountainside Baroque
Django Python web framework
Schilke 4-valve G/F/E trumpet
ember.js Javascript framework
Frasier
XFINITY Mobile (yes I actually like a comcast product)

Vue.js Gotchas

As what I would call an intermediate user of vue.js, I've started to notice a pattern to the issues that I run into -- usually a self-imposed issue because of a silly mistake or oversight.  It seems that in Vue.js, it's fairly easy to make these, with the complexity of front-end web development these days.  Here's a list of things to check should you be hung up on an issue in Vue.js.

 

Symptom: Child component fails to render and there's no error

1. Is the component correctly registered in the parent component?

2. Is the child component within the parent component's element?  Double check that the `el` property is set correctly, or move the child component within the parent component's element.

 

Symptom: A child component isn't getting props from the parent in a v-for loop

1. You didn't properly close the v-for tag.  This one is an easy mistake to make and a really tough one to spot:

_____________________________

<template>
    <div class="childclass">

        <h4>A header</h4>

        <MyChildArrayItem>

            v-for="(item, index) in my_items"

            v-bind:index="index"

            v-bind:key="item.id"

            v-bind:item="item">

        </MyChildArrayItem>

    </div>

</template>
______________________________________

The rendered child components won't receive any of those props.  Do you spot it?  There is an extraneous > character at the end of MyChildArrayItem.  This will cause the v-for and v-bind lines to be ignored.

 

 

 

 

Comments

Add a comment



Back

Recent articles:

Ruby on Rails, first impressions part 1

Vue.js Gotchas