CODEWITHSUNDEEP
vue.js
Ilia Levikov
Ilia Levikov

Reputation: 166

Vue iterating over list and checking condition

I have a Vue file, which takes data as json. I want to iterate through issues in my template and chose which TR to add. In Django templates I can do it like this:

{% for foo in foos %}
        {% if foo.status == 'status1' %}
            <tr class="bg-warning">
        {% elif foo.status == 'status2' %}
            <tr class="bg-success">
        {% elif foo.status == 'status3' %}
            <tr class="bg-danger">
        {% else %}
            <tr class="bg-info">
        {% endif %}

I'm trying to do it in Vue like this

 <tr v-for="foo in foos"
          v-bind:class="{
          'bg-warning': isReview(foo.status), 
          'bg-info': isRegistering(foo.status), 
          'bg-danger': isCancelled(foo.status), 
          'bg-success': isFinished(foo.status)}">

Next is my methods:

computed: {
  isReview: function (status) {
    if (status === 'status1') {
      return true
    } else {
      return false
    }
  },
  isRegistering: function (status) {
    if (status === 'status2') {
      return true
    } else {
      return false
    }
  },
  isCancelled: function (status) {
    if (status === 'status3') {
      return true
    } else {
      return false
    }
  },
  isFinished: function (status) {
    if (status === 'status4') {
      return true
    } else {
      return false
    }
  }
}

So my question is how to create 1 specific table row for each iteration which depends on Object.status?

Upvotes: 1

Views: 956

Answers (3)

rwold
rwold

Reputation: 2476

According to the docs, I think the syntax may be to wrap your classes in an array, with objects of the form {name: boolean}. Try:

<tr v-for="foo in foos"
      v-bind:class="[
      {'bg-warning': isReview(foo.status)}, 
      {'bg-info': isRegistering(foo.status)}, 
      {'bg-danger': isCancelled(foo.status)}, 
      {'bg-success': isFinished(foo.status)}
      ]">

Upvotes: 0

Yuci
Yuci

Reputation: 30149

Vue.js iterating over a list and checking conditions - for your reference:

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Vue iterating over list with and checking condition</title>
    <link rel="stylesheet" href="css/style.css"></link>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <table>
            <tr v-for="foo in foos" v-bind:class="{
                'bg-warning': isReview(foo.status), 
                'bg-info': isRegistering(foo.status), 
                'bg-danger': isCancelled(foo.status), 
                'bg-success': isFinished(foo.status)}"> 
                <td>{{ foo.issue }}</td>            
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>

main.js

new Vue({
    el: '#app',
    data: {
        foos: [{
                'status': 'status4',
                'issue': 'An issue with status4 success'
            },
            {
                'status': 'status1',
                'issue': 'An issue with status2 warning'
            }
        ]
    },
    methods: {
        isReview: function (status) {
            if (status === 'status1') {
                return true
            } else {
                return false
            }
        },
        isRegistering: function (status) {
            if (status === 'status2') {
                return true
            } else {
                return false
            }
        },
        isCancelled: function (status) {
            if (status === 'status3') {
                return true
            } else {
                return false
            }
        },
        isFinished: function (status) {
            if (status === 'status4') {
                return true
            } else {
                return false
            }
        }
    }
});

style.css

.bg-success {
    background-color: rgb(187, 223, 187);
}
.bg-warning {
    background-color: yellow;
}

Output shown in Chrome

enter image description here

Upvotes: 1

Igor Ognichenko
Igor Ognichenko

Reputation: 276

maybe 

<template>
    ...
    <tr v-for="foo in foos" :key="foo.status" :class="getStatusClass(foo)">
    ...
</template>

and methods on component 

methods: {
    getStatusClass(foo) {
        let className = '';

        switch(foo.status) {
            case 'warning': className = 'bg-warning'; break;
            case 'info': className = 'bg-info'; break;
            case 'danger': className = 'bg-danger'; break;
            case 'success': className = 'bg-success'; break;
        }

        return [className];
    }
}

Upvotes: 1

Related Questions