【问题标题】：Vue iterating over list and checking conditionVue迭代列表并检查条件
【发布时间】：2018-07-27 10:04:32
【问题描述】：

我有一个 Vue 文件，它将数据作为 json。我想遍历模板中的问题并选择要添加的 TR。在 Django 模板中，我可以这样做：

{% 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 %}

我正在尝试像这样在 Vue 中这样做

 <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)}">

接下来是我的方法：

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
    }
  }
}

所以我的问题是如何为每次迭代创建 1 个特定的表行，这取决于 Object.status？

【问题讨论】：

你的代码不工作吗？
计算属性不能有参数，换个方法试试
是的，根本不是创建表行，所以页面是空的
谢谢，JFM，问题已解决，将计算更改为方法

标签： vue.js

【解决方案1】：

根据the docs，我认为语法可能是将您的类包装在一个数组中，对象形式为{name: boolean}。试试：

<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)}
      ]">

【讨论】：

【解决方案2】：

也许

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

以及组件上的方法

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];
    }
}

【讨论】：

【解决方案3】：

Vue.js 遍历列表并检查条件 - 供您参考：

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/vue@2.5.13/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;
}

Chrome 中显示的输出

【讨论】：