在 v-for 循環中顯示 VUE.JS

Question

我在 Vue.js Vue 頁面中有一個 v-for 循環，它創建超鏈接並且代碼工作正常，但位置是每個項目都低於最后一個。 如果可能的話，我想將這些值放在水平線上，它們之間用逗號分隔。

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

我這樣做的方式可能嗎？

Answer 1

您可以通過使用帶有值inline或inline-block的 CSS 屬性display來簡單地實現這一點。

現場演示：

 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>

Answer 2

嘗試在包裝器 div 上設置display: flex ：

 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>