There is another array in the array in vue, how to loop it out?

Just look at the code without saying anything

The following is a module of my example, which is the content we want to loop out

    const LOOP = [
        {
    
    
            name: 'name',
            des: 'des',
            test: [
                {
    
    
                    name: 'name1',
                    des: 'des1',
                },
            ],
        },
        
        {
    
    
            name: 'NAME',
            des: 'DES',
            test: [
                {
    
    
                    name: 'NAME2',
                    des: 'DES2',
                },
            ],
        },
    ];

result:


     <div v-for="item in LOOP" :key="item">
       {
    
    {
    
     item.name }}
       {
    
    {
    
     item.des }}<br />
       <div v-for="item in item.test" :key="item">
         {
    
    {
    
     item.name }}<br />
         {
    
    {
    
     item.des}}
       </div>
     </div>

Effect picture
This is all looped out~

Tip: Sometimes the structure is messy, it is recommended to print it out like this

    <div v-for="item in test" :key="item">
	    {
    
    {
    
     item.name }}
	    {
    
    {
    
     item.des }}<br />
	    {
    
    {
    
     item }}      //看看这是什么?
	    <div v-for="item in item.test" :key="item">
	        {
    
    {
    
     item.name }}<br />
	        {
    
    {
    
     item.des }}
	        {
    
    {
    
     item }}     //看看这是什么?
	    </div>
    </div>

Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_43814775/article/details/114296153