vuejs conditional binding a class based on the data

Question

Can someone tell me what am I doing wrong? I am trying to bind the class based on if in the data model is displays a yes or no. I have tried conditional binding, but guess maybe I am missing a parameter or going about this the wrong way.

What am I missing? I want the css January class to bind to the table. how do I trigger v-if if v-bind already there?

Thanks

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

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

        td {
            background-color: grey;
        }
        .January{
            background-color: pink;
        }

    </style>
</head>

<body>

    <table>
        <div id="cal">

            <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Spent</th>
            </tr>
            <tr>
                <td v-bind:class="{'January':yes}">January</td>
                <td>$100</td>
                <td>$10</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
                <td>$300</td>
            </tr>

            <tr>
                <td>March</td>
                <td>$80</td>
                <td>$0</td>
            </tr>
            <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>

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

            </script>
        </div>
    </table>


</body>

</html>

Bert · Accepted Answer · 2018-05-31 19:51:00Z

So for the :class binding you pass in an object that is {css_class : someThingThatResolvesToTrueOrFalse}

So you could do something like

<td v-bind:class="{'January': January == 'yes'}">January</td>

The better approach would be to replace yes with a bool and judge off that value instead of a comparison.

Here is your code updated.

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

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

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

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

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="cal">

  <table>

    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Spent</th>
    </tr>
    <tr>
      <td v-bind:class="{'January':January == 'yes'}">January</td>
      <td>$100</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$300</td>
    </tr>

    <tr>
      <td>March</td>
      <td>$80</td>
      <td>$0</td>
    </tr>
  </table>
</div>


</body>

</html>

how. come if I change my data to no for January, the color pink is still applied?
@Vzupo I am not seeing that in the code that I posted. It changes whenever the value is not yes

Collectives™ on Stack Overflow

vuejs conditional binding a class based on the data

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related