display in a v-for loop VUE.JS

Question

I have a v-for loop in a Vue.js Vue page that creates hyperlinks and the code works fine but the placement is that each item is below the last. I would like to place the values in a horizonal line with commas between them if possible.

             <div v-for="objGrant in obj.GrantListData"  :key="objGrant.NCI_GrantList" >                      
              <b><a class="nav-link"  @click.prevent="load_NIH_Reporter(objGrant.GrantID)"                       
              v-bind:href="''"                       
              aria-label= 'Support' >{{ objGrant.GrantID }}</a></b>                
              </div>

Is it possible the way I'm doing it?

Nikola Pavicevic · Accepted Answer · 2022-09-11 20:58:37Z

3

Try to set display: flex on your wrapper div:

new Vue({
  el: '#demo',
  data() {
    return {
      obj: {GrantListData: [{NCI_GrantList: 1, GrantID: 1}, {NCI_GrantList: 2, GrantID: 2}, {NCI_GrantList: 3, GrantID: 3}]}
    }
  }
})

.list {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" class="list">
  <div v-for="(objGrant, i) in obj.GrantListData"  :key="objGrant.NCI_GrantList" >                      
    <b>
      <a class="nav-link"  @click.prevent="load_NIH_Reporter(objGrant.GrantID)"                       
    v-bind:href="''"                       
    aria-label= 'Support' >
        {{ objGrant.GrantID }}
      </a>
    </b>
    <span v-if="i < obj.GrantListData.length - 1">,</span>
  </div>
</div>

edited Sep 11, 2022 at 20:58

answered Sep 11, 2022 at 16:03

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

1 Comment

Bill Over a year ago

It was the display:flex that was needed--Thanks

Rohìt Jíndal · Accepted Answer · 2022-09-12 07:25:32Z

1

You can simply achieve that by using CSS property display with a value inline or inline-block.

Live Demo :

new Vue({
  el: '#app',
  data: {
    obj: {
        GrantListData: [{
        NCI_GrantList: 1,
        GrantID: 123
      }, {
        NCI_GrantList: 2,
        GrantID: 456
      }, {
        NCI_GrantList: 3,
        GrantID: 789
      }]
    }
  }
})

div {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(objGrant, index) in obj.GrantListData"  :key="objGrant.NCI_GrantList">
    <b><a class="nav-link" v-bind:href="''">{{ objGrant.GrantID }}</a></b>
    <span v-if="index < obj.GrantListData.length - 1">, </span>
  </div>
</div>

edited Sep 12, 2022 at 7:25

answered Sep 12, 2022 at 7:17

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

display in a v-for loop VUE.JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related