在vue js中显示第一个对象

时间:2019-05-21 07:31:56

标签: vue.js

我有一个从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"]
        }
    }
}

2 个答案:

答案 0 :(得分:0)

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

print("{0} {1}".format(var1, var2))
#include <stdio.h>
#include <signal.h>
#include <unistd.h>
#include <stdlib.h>


int ctrlcs=0;

void cchandler(int signum){
  printf("Press again to quit.\n");
  ctrlcs+=1;
  if (ctrlcs==2) {
    signal(SIGINT, SIG_DFL);
  } 
  usleep(300000);  // delay for the second Ctrl-C
}

int main(){

  signal(SIGINT, cchandler);

  while(1) {
   printf(" I am running into infinite loop.., stop me if you dare..\n");
   sleep (5);
   ctrlcs=0;
  }

}

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

答案 1 :(得分:0)

我建议您在对一个对象进行迭代并需要类似数组之类的功能时使用计算属性。

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,您将拥有除了使用数组作为数组保持顺序外,没有其他选择。