Vue迭代列表并检查条件

问题描述 投票：1回答：3

我有一个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？

vue.js
3个回答
1
投票

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/[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

1
投票

也许

<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];
    }
}
0
投票

根据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)}
      ]">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.