How to use v-for in jsx about babel-plugin-transform-vue-jsx HOT 6 CLOSED

You can just use JavaScript loop.

const items = nav.map((item, index) => {
  return <li class={{ header_nav_item: true, active: this.activeNav === item.type }}>{item.name}</li>
})

<ul class="header_nav_list">
  {items}
</ul>

from babel-plugin-transform-vue-jsx.

what about v-if v-else

from babel-plugin-transform-vue-jsx.

It works!Thank you very much!😬

from babel-plugin-transform-vue-jsx.

@weiluxia1988 maybe like

if (condition) {
   ...
} else {
   ...
}

from babel-plugin-transform-vue-jsx.

if like this nested map how code

 a: [
        {
            class: 'm-l-20 darkGrey',
            value: '',
            i:[
                {class:'fa fa-angle-down'},
                {class:'fa fa-angle-down'},
            ]

        }
     ]

from babel-plugin-transform-vue-jsx.

You can just use JavaScript loop.

const items = nav.map((item, index) => {
  return <li class={{ header_nav_item: true, active: this.activeNav === item.type }}>{item.name}</li>
})

<ul class="header_nav_list">
  {items}
</ul>

I've been using this, and I wonder if it makes any sense to provide key with .map() approach, or if it's only used for optimization with v-for?... https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

from babel-plugin-transform-vue-jsx.