CODEWITHSUNDEEP
javascriptcssvue.jsinternet-explorer-11
ThomasE
ThomasE

Reputation: 409

Vue.js - Div - use string result from computed as class name

I might be into deep water here - trying to make a css-grid work in IE11 and Vue.js

I have a LI like this:

  <li :class="{getClass}">
  </li>

getClass is a computed method:

getClass: function () {
  return "Row" + this.getMSRow() + "Column" + this.getMSColumn();
},

And in the stylesheet I have the def. of all the classes:

.Row1Column1 {
   -ms-grid-column: 1;
   -ms-grid-row: 1;
   grid-column: 1;
   grid-row: 1;
}

This actually works very fine in IE11.

My issue is the fact that I need to add 2 more conditional classes to the same LI.

 :class="{
  getClass,
  'calendar-day--not-current': !day.isCurrentMonth,
  'calendar-day--today': isToday,
}"

This doesn't work - it makes 'getClass' a class - instead of the result of the computed method. I assume it's just a matter of some simple syntax..., but I'm out of ideas.

Thanks in advance for any help.

Upvotes: 2

Views: 1507

Answers (2)

Anatoly
Anatoly

Reputation: 22758

I suppose you need to define a computed class object in order to use it directly in :class binding:

<li :class="liClass">
</li>
...

computed: {
   liClass () {
     return {
      [this.getClass]: true,
      'calendar-day--not-current': !this.day.isCurrentMonth,
      'calendar-day--today': this.isToday,
     }
   }
}

Upvotes: 1

Nilesh Patel
Nilesh Patel

Reputation: 3317

Here is the solution

: class="[
    getClass,
    { 'calendar-day--not-current': !day.isCurrentMonth },
    { 'calendar-day--today': isToday },
]"

if you want to have static class as well.

: class="[
    'static-class',
    getClass,
    { 'calendar-day--not-current': !day.isCurrentMonth },
    { 'calendar-day--today': isToday },
]"

Upvotes: 1

Related Questions