ternary operator usage within v-bind class

Question

So I am using vuejs and trying to add a ternary operator or something that will not force the v-bind class to apply. Even if the data is false, it still applies the css class. how do I prevent this?

new Vue({
  el: '#cal',
  data: {

    January: 'no',
    February: 'no',
    March: 'no',
    April: 'yes',
    May: 'yes',
    June: 'yes',
    July: 'no',
    August: 'no',
    September: 'no',
    October: 'no',
    November: 'no',
    December: 'no'
  }
})

table,
th,
td {
  border: 1px solid black;
}

th {
  width: 100px;
  height: 100px;
  background-color: white;
}

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>


<table>
  <div id="cal">

    <tr>
      <th>Jan</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Apr</th>
      <th>May</th>
      <th>Jun</th>
      <th>Jul</th>
      <th>Aug</th>
      <th>Sep</th>
      <th>Oct</th>
      <th>Nov</th>
      <th>Dec</th>
    </tr>
    <tr>
      <td v-bind: class="{'January' : January == 'yes' }">askjdldsaa</td>
      <td v-bind: class="{'February' : February == 'yes'}"></td>
      <td v-bind: class="{'March' : March == 'yes'}"></td>
      <td v-bind: class="{'April' : April == 'yes'}"></td>
      <td v-bind: class="{'May' : May == 'yes'}"></td>
      <td v-bind: class="{'June' : June == 'yes'}"></td>
      <td v-bind: class="{'July' : July == 'yes'}"></td>
      <td v-bind: class="{'August' : August == 'yes'}"></td>
      <td v-bind: class="{'September' : September == 'yes'}"></td>
      <td v-bind: class="{'October' : October == 'yes'}"></td>
      <td v-bind: class="{'November' : November == 'yes'}"></td>
      <td v-bind: class="{'December' : December == 'yes'}"></td>

    </tr>



  </div>
</table>

I have updated the sample to show the issue with the conditional applied. It still renders the pink box even if I changed the data to a "no".

new Vue({
  el: '#cal',
  data: {

    January: 'no',
    February: 'no',
    March: 'no',
    April: 'yes',
    May: 'yes',
    June: 'yes',
    July: 'no',
    August: 'no',
    September: 'no',
    October: 'no',
    November: 'no',
    December: 'no'
  }
})

table,
th,
td {
  border: 1px solid black;
}

th {
  width: 100px;
  height: 100px;
  background-color: white;
}

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<table>
  <div id="cal">

    <tr>
      <th>Jan</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Apr</th>
      <th>May</th>
      <th>Jun</th>
      <th>Jul</th>
      <th>Aug</th>
      <th>Sep</th>
      <th>Oct</th>
      <th>Nov</th>
      <th>Dec</th>
    </tr>
    <tr>
      <td v-bind: class="{'January' : January == 'yes' }">askjdldsaa</td>
      <td v-bind: class="{'February' : February == 'yes'}"></td>
      <td v-bind: class="{'March' : March == 'yes'}"></td>
      <td v-bind: class="{'April' : April == 'yes'}"></td>
      <td v-bind: class="{'May' : May == 'yes'}"></td>
      <td v-bind: class="{'June' : June == 'yes'}"></td>
      <td v-bind: class="{'July' : July == 'yes'}"></td>
      <td v-bind: class="{'August' : August == 'yes'}"></td>
      <td v-bind: class="{'September' : September == 'yes'}"></td>
      <td v-bind: class="{'October' : October == 'yes'}"></td>
      <td v-bind: class="{'November' : November == 'yes'}"></td>
      <td v-bind: class="{'December' : December == 'yes'}"></td>

    </tr>


  </div>
</table>

Do you have this.January in your component? Can you show your javascript code? — ittus
– ittus, Commented Jun 1, 2018 at 14:18

Bert · Accepted Answer · 2018-06-01 14:51:51Z

4

Well, the code you provided is not a valid Javascript expression so I would doubt that it would run at all ...

This however works:

v-bind:class="{'January' : January == 'yes' }

No need for a ternary operator at all. You would only use a ternary operator if you wanted to render either one class, or another. In that case, not using an object but an array (if multiple expressions)

v-bind:class="['staticClass', january = 'yes' ? 'isJanuary' : 'notJanuary']"

edited Jun 1, 2018 at 14:51

Bert

82.6k17 gold badges204 silver badges166 bronze badges

answered Jun 1, 2018 at 14:20

Linus Borg

24k7 gold badges65 silver badges52 bronze badges

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

1 Comment

Vzupo Over a year ago

please see sample above

Bert · Accepted Answer · 2018-06-01 14:51:07Z

There are some issues with the way you are building your template (and I fixed these in the answer to your previous question).

First, you can't nest a div inside a table like you have here:

<table>
    <div id="cal">
    ...
    </div>
</table>

Second, you can't have a space here v-bind: class.

Here is your code cleaned up and working.

new Vue({
  el: '#cal',
  data: {
    January: 'no',
    February: 'no',
    March: 'no',
    April: 'yes',
    May: 'yes',
    June: 'yes',
    July: 'no',
    August: 'no',
    September: 'no',
    October: 'no',
    November: 'no',
    December: 'no'
  }
})

table,
th,
td {
  border: 1px solid black;
}

th {
  width: 100px;
  height: 100px;
  background-color: white;
}

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="cal">
  <table>
    <tr>
      <th>Jan</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Apr</th>
      <th>May</th>
      <th>Jun</th>
      <th>Jul</th>
      <th>Aug</th>
      <th>Sep</th>
      <th>Oct</th>
      <th>Nov</th>
      <th>Dec</th>
    </tr>
    <tr>
      <td v-bind:class="{'January' : January == 'yes' }">askjdldsaa</td>
      <td v-bind:class="{'February' : February == 'yes'}"></td>
      <td v-bind:class="{'March' : March == 'yes'}"></td>
      <td v-bind:class="{'April' : April == 'yes'}"></td>
      <td v-bind:class="{'May' : May == 'yes'}"></td>
      <td v-bind:class="{'June' : June == 'yes'}"></td>
      <td v-bind:class="{'July' : July == 'yes'}"></td>
      <td v-bind:class="{'August' : August == 'yes'}"></td>
      <td v-bind:class="{'September' : September == 'yes'}"></td>
      <td v-bind:class="{'October' : October == 'yes'}"></td>
      <td v-bind:class="{'November' : November == 'yes'}"></td>
      <td v-bind:class="{'December' : December == 'yes'}"></td>
    </tr>
  </table>
</div>

Once you fix those issues, then the basic class binding

v-bind:class="{'January' : January == 'yes' }"

Is all you need to toggle the class appropriately as suggested in the answer to your question yesterday and by @LinusBorg in the answer today.

what if the data comes from an array called Array? would it be {'January': Array.January == 'yes'}
same thing, but inside of Array:[{January:'yes', February:'no', March:'no'}]
@vzupo. no looking for something super simple. Basically I can get the data with an Ajax request and when it is returned, it is a simple array. if array is called box:[{January:'yes',Feb:'no',March:'no'}] all within... just wondering how do I access the array inside the condition
@Vzupo if you look at monthData in the linked example it is exactly that array.

Collectives™ on Stack Overflow

ternary operator usage within v-bind class

2 Answers 2

1 Comment

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Linked

Related