Vue.js binding classes to component templates

Question

I want to be able to bind a class to my component template based on a condition but also apply a default class that is always there.

Here's my code so far I'm able to get it to apply the currentMonth class when the condition is met but not the event_month class never gets applied. Am I using the correct syntax?

const listTemplate = '' +
'<div class="list_body">' +
    '<div v-for="(month, index) in months" v-bind:class="[event_month, {current : index === currentMonth}]">' +
        '{{month}}' +
    '</div>' +
'</div>';

Vue.component('events-list-view', {
    template: listTemplate,
    data() {
        return {
            months:  ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            currentMonth: new Date().getMonth(),
        };
    },
});

new Vue({ el: "#app" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<events-list-view />
</div>

lry · Accepted Answer · 2020-07-17 13:50:01Z

1

Just modify event_month to \'event_month\':

const listTemplate = '' +
'<div class="list_body">' +
    '<div v-for="(month, index) in formattedEvents" v-if="month.length" v-bind:class="[\'event_month\', {current : index === currentMonth}]">' +
    '</div>' +
'</div>';

event_month is compiled as an instance property.

answered Jul 17, 2020 at 13:50

lry

7583 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jhabar singh Bhati · Accepted Answer · 2020-07-17 13:38:17Z

0

In the above code you are binding event_month to all 12 div nodes but only one of them will be binded with current class.

But you question is not clear, can you please elaborate .

answered Jul 17, 2020 at 13:38

jhabar singh Bhati

1092 silver badges11 bronze badges

1 Comment

Reece Over a year ago

The issue is that event_month doesn't get binded to all 12 nodes. I have amended my question to more clearly show this

Collectives™ on Stack Overflow

Vue.js binding classes to component templates

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related