How can I construct the equivalent of this PHP foreach() rendering in Vue.js?

Question

I know this is a very silly question but im new to vuejs and i would like to know how to convert this simple php code to vuejs

<div>
<?php
 foreach( $array as $key => $value){
  if($key == 0){
    echo '<div>'.$key.'</div>';
  }else{
   echo '<div>'.$value.'</div>';
  }
}
?>
<div>

it should go something like this :

<div>
 <div v-for="(item, key) in items" v-if="key == 0">{{key}}</div>
 <div v-else>{{item}}</div>
</div>

The condition in the for loop would break your else condition, try <div v-for="(item, key) in items"><div v-if="key == 0">{{key}}</div> <div v-else>{{item}}</div></div> — Randy
– Randy, Commented Jul 7, 2017 at 14:37

Nathan Wailes · Accepted Answer · 2017-07-07 15:01:30Z

1

Try this:

<template v-for="(item, index) in items">
  <div v-if="index === 0">{{index}}</div>
  <div v-else>{{item}}</div>
</template>

JSFiddle

edited Jul 7, 2017 at 15:01

answered Jul 7, 2017 at 14:40

Nathan Wailes

12.6k10 gold badges77 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thanksd Over a year ago

Just fyi, this uses Vue version 1. In Vue version 2 (which I think the asker is using), the syntax would need to be v-for="(item, index) in items".

Collectives™ on Stack Overflow

How can I construct the equivalent of this PHP foreach() rendering in Vue.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related