[Vuejs]-Unable to compare numbers with v-if

by

-1👍

✅

Check that there is no close tag of the TR element and the use of this is incorrect, so the valid markup is:

Example 1: (check https://codepen.io/matiasperrone/pen/JQdRzW)

<div id="app">
  <table>
    <tbody>
      <tr v-for="cat in table_data" :key="cat">
        <th v-for="(value, key) in data" :key="value">
          <div :style="{ backgroundColor:  key === 'Projected Utilization' ? 'transparent' : 0.0 <= value ? 'coral' : 'green' }">{{ value }}</div>
        </th>
      </tr>
    </tbody>
  </table>
</div>

Javascript:

new Vue({
  el: '#app',
  data() {
    return {
      table_data: [{name: 'data1'}, {name: 'data2'},],
      data: {key1: 1001, key2: -1003, "Projected Utilization": 100}
    }
  }
});

Leave a comment