在 Vue v-if 中，如何检查对象数组中的对象是否具有指定键的特定值？答案

【问题标题】：Within Vue v-if, How do I check if an object within an array of objects has a specific value for a specified key?在 Vue v-if 中，如何检查对象数组中的对象是否具有指定键的特定值？
【发布时间】：2020-02-22 08:07:12
【问题描述】：

.Vue 文件中的代码子集：

<div v-if="??"></div>

.Vue 文件中的代码子集：

data() {
        return {
            form: {
                taken_test: '',
                current_income: '',
                gmat_score: '',
                gpa: '',
                graduation_year: '',
                gre_score: '',
                illiquid_assets: '',
                immigration_status: '',
                income_1: '',
                income_2: '',
                income_3: '',
                liabilities: '',
                liquid_assets: '',
                total_mortgage: '',
                reports: [],
                email: '',
            },
            errors: {},
        }
    },

在报告数组中，我有几个对象，如下所示。例如：

reports: [
    {aid_amount: 500, university_id: 1, aid_qualification: 'merit-based' },
    {aid_amount: 400, university_id: 2, aid_qualification: 'need-based' },
    {aid_amount: 200, university_id: 16, aid_qualification: 'merit-based' },
    {aid_amount: 700, university_id: 23, aid_qualification: 'merit-based' },
    {aid_amount: 300, university_id: 100, aid_qualification: 'need-based' },
]

如果这些对象中至少有一个具有aid_qualification，我需要显示一个：'merit-based' 最好的方法是什么？

我在想我可以有一个 computed() 变量，但我觉得有更好的方法来做到这一点，我只是不知道怎么做。

【问题讨论】：

标签： vue.js

【解决方案1】：

我会使用计算属性。

<div v-if="hasAidQualification"></div>

computed: {
  hasAidQualification() {
    return this.form.reports.some(
      ({ aid_qualification }) => aid_qualification === 'merit-based'
    );
  }
}

【讨论】：

【解决方案2】：

你的直觉是正确的。这是计算属性的一个很好的例子。您也可以在模板中使用方法或编写一些逻辑，但计算属性确实是您所需要的。比如：

{
  computed: {
    hasMeritBased() {
      const {reports} = this;
      return Boolean(reports.length && reports.filter(r => r.aid_qualification === 'merit-based').length);
    },
  },
},

【讨论】：