Can I use Vue v-for without using either ul or ol

Question

I'm new to Vue. I want to display some rows of data but I don't want either numbers (ol) or bullet points (ul). Is there an alternative to my approach below?

<li v-for="product in contract.products">
  <div class="p-1 row">
    <div class="col-4">
      <strong>{{ product.productName }}</strong>
    </div>
    <div class="col-4">
      Allocation: {{ product.allocation }}
    </div>
    <div class="col-4">
      Fulfilled:  {{ product.allocationFulfilled }}
    </div>
  </div>
</li>

Thank you very much.

Answer 1

While the examples of v-for generally use <li>, you can actually use the v-for directive on any element that you want to repeat. So you could change your markup to this:

<div class="p-1 row" v-for="product in contract.products">
  <div class="col-4">
    <strong>{{ product.productName }} </strong>
  </div>
  <div class="col-4">
    Allocation: {{ product.allocation }}
  </div>
  <div class="col-4">
    Fulfilled:  {{ product.allocationFulfilled }}
  </div>
</div>