Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Vue.js Basics Sweeping Vues: Loops, Methods, Directives List Rendering with v-for

Monroe Gollaher
Monroe Gollaher
7,301 Points
Posted by Monroe Gollaher
Monroe Gollaher
7,301 Points

List Rendering with v-for

I keep trying the exercise mentioned in this video in both visual studio code and workspaces and keep getting an error in the console about how {{color}} is not a valid attribute. I even tried using {{basketball}} like in the video. Also while checking the dev console, I don't even see that there's an <li> created. Any help would be GREATLY appreciated.

Here's my code: https://w.trhou.se/pk4c2c81n7

1 Answer

Elijah Quesada
.a{fill-rule:evenodd;}techdegree seal-36
Elijah Quesada
Front End Web Development Techdegree Graduate 32,965 Points

Try adding "{{basketball}}" inside the li tags. Currently it sits as if it was an attribute. 

        <ul>
            <li v-for="basketball in rainbow">{{basketball}}</li>
        </ul>
    </div>
Monroe Gollaher
Monroe Gollaher
7,301 Points
Monroe Gollaher
Monroe Gollaher
7,301 Points

ah THANK YOU! I had the error right there in front of me the whole time haha. Thanks again, that totally worked!