display in a v-for loop VUE.JS-CodePudding

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   @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?

CodePudding user response：

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" >
  <div v-for="(objGrant, i) in obj.GrantListData"  :key="objGrant.NCI_GrantList" >                      
    <b>
      <a   @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>

CodePudding user response：

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  v-bind:href="''">{{ objGrant.GrantID }}</a></b>
    <span v-if="index < obj.GrantListData.length - 1">, </span>
  </div>
</div>