Vue.js Conditionally adding classes based on the values of a property

Question

Hi all.

Well, I've been trying but I can't seem to find the expression I need to generate the right classes based on the property values in my Vue instance.

<article class="project-list">


                <h2>{{ list }}</h2> 
                <ul id="project-status">
                    <li v-for="status in projects">
                        <span v-bind:class="{'complete': projects[true], 'incomplete': !projects[false]}">{{ status.project_status }} </span>
                    </li>
                </ul>
                <ul id="project-names">
                    <li v-for="name in projects">{{ name.project_name }}</li>

                <!--
                <li><span class="incomplete"></span>Project 1</li>
                <li><span class="complete"></span>Project 2</li>
                <li><span class="complete"></span>Project 3</li>
                <li><span class="complete"></span>Form Project</li>
                <li><span class="incomplete"></span>Project 1</li>
                <li><span class="complete"></span>Project 2</li>
                <li><span class="complete"></span>Project 3</li>

                -->
            </ul>

        </article>

So in my code I have unordered list which I have a v-for directive which generates the list items I need. The span element inside project-status have CSS applied so it renders Green for a project that is complete and a red backround for incomplete projects.

No matter what I try however, I only get all 6 list items showing red or showing green.

Here's my Vue instance. Thanks :)

const vue = new Vue({

    el: '.project-list',
    data: {
        list: "Project List",
        projects:  [{
            project_name: "Vue Project",
            project_status: "Complete",
            status: true,
        },
        {
            project_name: "jQuery Project",
            project_status: "Incomplete",
            status: false,    
        },
        {
            project_name: "JavaScript",
            project_status: "Complete",
            status: true,
        },
        {
            project_name: "HTML5",
            project_status: "Complete",
            status: true,
        },
        {
            project_name: "PHP",
            project_status: "Incomplete",
            status: false,
        },
        {
            project_name: "Python",
            project_status: "Incomplete",
            status: false,
        }]
    },
    methods: {

    },

    computed: {

    }

});

Answer 1 · 2019-02-15T15:24:34Z

February 15, 2019 3:24pm

Hi Jonathan,

Change the v-bind:class to the following:

<span v-bind:class="{'complete': status.status, 'incomplete': !status.status}">

It probably wouldn't hurt to change the v-for to v-for="project in projects so then the v-bind could be written as v-bind:class="{'complete': project.status, 'incomplete': !project.status} so it's easier to understand, but that's personal opinion and not judgement.

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Grieve

Jonathan Grieve

Vue.js Conditionally adding classes based on the values of a property

1 Answer

Sean T. Unwin

Sean T. Unwin

Jonathan Grieve

Jonathan Grieve