在 vue js 中显示第一个对象答案

【问题标题】：Displaying the first object in vue js在 vue js 中显示第一个对象
【发布时间】：2019-05-21 07:31:56
【问题描述】：

我有一个来自 php 的数组，它被转换为对象。该对象内部有一个对象。我怎样才能只显示第一个对象。

试过了。

<li v-for="val in CareerLevel.CLLevel">
    <a href="#">{{val}}</a>
    <ul>
        <li>
         <a href="#">Grand Child</a>
        </li>
    </ul>
</li>

{
    "CLLevel":
    {
        "13":
        {
            "Role":["Community Operations New Associate"]
        },
        "12":
        {  
            "Role":["Junior SME","Cross-Skilled Associate","Incubation\/Special Project Associate","Quality Auditor","Trainer","System Developer Associate","Junior SME","System Developer"]
        },
        "11":
        {
            "Role":["Jr. Team Lead\/ Senior SME","Market-Vetical SME","Senior Quality Auditor\/Analyst","Senior Trainer","Policy Analyst","System Developer Analyst","R&C Analyst","policy analyst"]
        },
        "10":
        {
            "Role":["Team Lead","Quality Jr Team Lead","Training Jr Team Lead","Policy Senior Analyst"," System Developer Team Lead"]},"9":{"Role":["Shift Lead"," Senior Team Lead","Quality Lead","Policy Lead","Change Management Lead","R&C Specialist","Training Lead"]
        },
        "8":
        {
            "Role":["Community Operations Market Lead","Local\/Site QTP Lead","Mobilization Lead","Service Management Lead","Global System Developer Lead"," Business Excellence Associate Manager"]
        }
    }
}

【问题讨论】：

<a href="#">{{ val.Role[0] }}</a> 应该显示每个“角色”数组的第一个元素。
我假设您想要最高价值的对象（在这种情况下为 13）。对象是无序的，因此获取第一个条目并不总是有效。如果您执行Object.keys(CLLevel)，您将获得所有值的数组（['13','12','11',etc..]）。找到这些条目的最大值并将其用作参考（例如CLLevel[highestVal]，其中highestVal 是具有最高编号条目的字符串变量）。

标签： vue.js

【解决方案1】：

以完全静态的方式，您可以这样做。

<li>{{firstElement}}</li>

data() {
   return {
      CareerLevel: { /* Your data here */  }
   }
},

computed: {
    firstElement() {
      return Object.values(this.CareerLevel.CLLevel)[0].Role[0]
    }
}

要“正确”执行此操作，请使用递归方法。

【讨论】：

【解决方案2】：

我建议您为此使用计算属性，因为您正在迭代一个对象并想要类似的功能，例如数组。

new Vue({
  el: '#app',
  data : {
    CareerLevel : {
    "CLLevel":
    {
        "13":
        {
            "Role":["Community Operations New Associate"]
        },
        "12":
        {  
            "Role":["Junior SME","Cross-Skilled Associate","Incubation\/Special Project Associate","Quality Auditor","Trainer","System Developer Associate","Junior SME","System Developer"]
        },
        "11":
        {
            "Role":["Jr. Team Lead\/ Senior SME","Market-Vetical SME","Senior Quality Auditor\/Analyst","Senior Trainer","Policy Analyst","System Developer Analyst","R&C Analyst","policy analyst"]
        },
        "10":
        {
            "Role":["Team Lead","Quality Jr Team Lead","Training Jr Team Lead","Policy Senior Analyst"," System Developer Team Lead"]},"9":{"Role":["Shift Lead"," Senior Team Lead","Quality Lead","Policy Lead","Change Management Lead","R&C Specialist","Training Lead"]
        },
        "8":
        {
            "Role":["Community Operations Market Lead","Local\/Site QTP Lead","Mobilization Lead","Service Management Lead","Global System Developer Lead"," Business Excellence Associate Manager"]
        }
    }
}
  },
  
  computed : {
    firstObj : function(){
      for (var key in this.CareerLevel.CLLevel) {
        if (this.CareerLevel.CLLevel.hasOwnProperty(key)) {
            return this.CareerLevel.CLLevel[key]
        }
        break;
      }
    }
  }
});

<div id="app">
 <a href="#">{{firstObj}}</a>
  <ul>
    <li>
      <a href="#">Grand Child</a>
    </li>
  </ul>
</div>

PS：这将在您使用对象时呈现带有键 8 的 CLLevel，并且它们本质上是无序的，无论您如何将它们插入到对象中，它们都是无序的，如果您希望带有键 13 的 CLLevel 出现，那么您将拥有除了使用数组作为数组维护顺序之外别无选择。

【讨论】：