根据特定值从数组中选择项目答案

【问题标题】：Select items from an array based on specific values根据特定值从数组中选择项目
【发布时间】：2021-08-03 21:44:57
【问题描述】：

我目前得到一个体育赛事列表并将它们存储为 Vue 数据对象。数组中的每个项目都有 Home Win、Away Win、Draw 的键值对。使用v-for，我想列出所有类型为“home”和类型“away”的团队名称，但这些项目的顺序没有按顺序返回。

所以使用v-for 我试图了解如何渲染：

<div>home 类型的teamname 值 vs away 类型的teamname 值</div>

{
    "data": [
        {
            "options": [
                {
                    "type": "home",
                    "teamname": "xxx"
                },
                {
                    "type": "away",
                    "teamname": "yyy"
                },
                {
                    "type": "draw",
                    "teamname": "no winner"
                }
            ]
        },
        {
            "options": [
                {
                    "type": "away",
                    "teamname": "yyy"
                },
                {
                    "type": "draw",
                    "teamname": "no winner"
                },
                {
                    "type": "home",
                    "teamname": "xxx"
                }
            ]
        },
        {
            "options": [
                {
                    "type": "draw",
                    "teamname": "no winner"
                },
                {
                    "type": "home",
                    "teamname": "xxx"
                },
                {
                    "type": "away",
                    "teamname": "yyy"
                }
            ]
        }
    ]
}

【问题讨论】：

为了清楚起见，您希望在传入数据中为每个 option 对象显示一个 <div>{{ teamname value of type home }} vs {{ teamname value of type away }}</div>？
完全正确。对于数组中的每一项

标签： arrays sorting vuejs2

【解决方案1】：

我想这就是你要找的东西：

...
  <div v-for="(item, index) in data" key="index">
    {{ item.options.find(op => op.type === "home").teamname }} vs {{ item.options.find(op => op.type === "away").teamname }}
  </div>
...

您将遍历传入的data 对象中的每个项目，并为每个项目使用Array.prototype.find() 来检索所需的团队。

可运行示例如下：

new Vue({
  el: '#app',
  data() {
    return {
      data: [{
          "options": [{
              "type": "home",
              "teamname": "xxx"
            },
            {
              "type": "away",
              "teamname": "yyy"
            },
            {
              "type": "draw",
              "teamname": "no winner"
            }
          ]
        },
        {
          "options": [{
              "type": "away",
              "teamname": "yyy"
            },
            {
              "type": "draw",
              "teamname": "no winner"
            },
            {
              "type": "home",
              "teamname": "xxx"
            }
          ]
        },
        {
          "options": [{
              "type": "draw",
              "teamname": "no winner"
            },
            {
              "type": "home",
              "teamname": "xxx"
            },
            {
              "type": "away",
              "teamname": "yyy"
            }
          ]
        }
      ],
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>Home vs. Away</h3>
  <div v-for="(item, index) in data" key="index">
    {{ item.options.find(op => op.type === "home").teamname }} vs {{ item.options.find(op => op.type === "away").teamname }}
  </div>
</div>

最后一点；
如果您可以控制输入，并且您知道结构将是一致的，那么将 options 数组作为单个对象发送可能是有意义的。不要让 3 个对象每个都带有 type 和 teamname 键，而是使用一个带有 home/away/draw 的对象作为单独的键，如下所示：

options: {
  home: 'home-team-name',
  away: 'away-team-name',
  draw: 'no winner',
}

这样，您可以直接访问该字段，而不是使用item.options.find(op => op.type === "home").teamname：

{{ item.options.home }} vs {{ item.options.away }}

new Vue({
  el: '#app',
  data() {
    return {
      data: [{
          "options": {
            "home": "xxx",
            "away": "yyy",
            "draw": "no winner",
          }
        },
        {
          "options": {
            "away": "yyy",
            "draw": "no winner",
            "home": "xxx",
          }
        },
        {
          "options": {
            "draw": "no winner",
            "home": "xxx",
            "away": "yyy",
          }
        }
      ],
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>Home vs. Away</h3>
  <div v-for="(item, index) in data" key="index">
    {{ item.options.home }} vs {{ item.options.away }}
  </div>
</div>

【讨论】：

【解决方案2】：

一个解决方案的小sn-p：

const results = {
  "data": [{
      "options": [{
          "type": "home",
          "teamname": "xxx"
        },
        {
          "type": "away",
          "teamname": "yyy"
        },
        {
          "type": "draw",
          "teamname": "no winner"
        }
      ]
    },
    {
      "options": [{
          "type": "away",
          "teamname": "yyy"
        },
        {
          "type": "draw",
          "teamname": "no winner"
        },
        {
          "type": "home",
          "teamname": "xxx"
        }
      ]
    },
    {
      "options": [{
          "type": "draw",
          "teamname": "no winner"
        },
        {
          "type": "home",
          "teamname": "xxx"
        },
        {
          "type": "away",
          "teamname": "yyy"
        }
      ]
    }
  ]
}

Vue.component("DisplayResult", {
  props: ['result'],
  computed: {
    home() {
      return this.result.find(({
        type
      }) => type === "home")["teamname"]
    },
    away() {
      return this.result.find(({
        type
      }) => type === "away")["teamname"]
    },
  },
  template: `
    <div>{{ home }} vs. {{ away }}</div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      results: [],
    }
  },
  mounted() {
    this.results = results.data
  },
  template: `
    <div>
      <display-result
        v-for="({ options }, i) in results"
        :key="i"
        :result="options"
      />
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

使用此解决方案，您可以对结果的显示进行精细控制：样式、内容等在一个组件中，而数据源在父组件中。模板“清晰”，没有任何代码，因此维护和更新更容易。

【讨论】：