时间戳

首页 > 解决方案 > 检查对象中是否存在条件

vue.js - 检查对象中是否存在条件

问题描述

在一个 Vue JS 应用程序中，我正在处理以下结构，该结构作为道具传递到组件中以创建导航链接：

const data = [
                {
                    category: 'Part 1',
                    items: [
                        {
                            'title': 'plan A',
                            'etlJobRefresh': false,
                            'type': 'form'
                        },
                        {
                            'title': 'plan B',
                            'etlJobRefresh': true,
                            'type': 'form'
                        },
                        {
                            'title': 'plan C',
                            'type': 'form'
                        },
                        {
                            'title': 'plan D',
                            'type': 'query'
                        },

                    ]
                },
                {
                    category: 'Part 2',
                    items: [
                        {
                            'title': 'plan A',
                            'type': 'form'
                        },
                        {
                            'title': 'plan B',
                            'type': 'query'
                        }
                    ]
                },
                {
                    category: 'Part 3',
                    items: [
                        {
                            'title': 'plan A',
                            'etlJobRefresh': false,
                            'type': 'form'
                        }
                    ]
                }
];

该组件包含一个元素，该元素仅在data道具包含具有'eltJobRefresh': true && 'type': 'form'. 如何在不使用第三方库的情况下检查传入的数据道具以查看该条件是否存在？

标签： vue.js

解决方案

您可以使用计算属性进行过滤

Vue.component('my-component', {
  template: `
  <div>
    <div v-for="element in computedData">{{element.title}}</div>
  </div>
  `,
  props: ['data'],
  computed: {
    computedData: function() {
      let list = [];
      this.data.items.forEach(element => {
        console.log(element.eltJobRefresh);
        if (element.etlJobRefresh && element.type == 'form') {
          list.push(element);
        }
      });
      return list;
    }
  }
})
new Vue({
  el: '#app',
  data: {
    data: [{
        category: 'Part 1',
        items: [{
            'title': 'plan A',
            'etlJobRefresh': false,
            'type': 'form'
          },
          {
            'title': 'plan B',
            'etlJobRefresh': true,
            'type': 'form'
          },
          {
            'title': 'plan C',
            'type': 'form'
          },
          {
            'title': 'plan D',
            'type': 'query'
          },

        ]
      },
      {
        category: 'Part 2',
        items: [{
            'title': 'plan A',
            'type': 'form'
          },
          {
            'title': 'plan B',
            'type': 'query'
          }
        ]
      },
      {
        category: 'Part 3',
        items: [{
          'title': 'plan A',
          'etlJobRefresh': false,
          'type': 'form'
        }]
      }
    ],
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <my-component :data="data[0]"></my-component>
    <my-component :data="data[1]"></my-component>
  </div>

</body>

</html>

推荐阅读