Могу ли я использовать Vue v-for, не используя ul или ol? - PullRequest
Новая
       19

Могу ли я использовать Vue v-for, не используя ul или ol?

1 голос
/ 03 октября 2019

Я новичок в Vue. Я хочу отобразить некоторые строки данных, но мне не нужны ни цифры (ol), ни маркеры (ul). Есть ли альтернатива моему подходу ниже? 

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

Большое спасибо.

1 Ответ

4 голосов
/ 03 октября 2019

Хотя в примерах v-for обычно используется <li>, вы можете использовать директиву v-for для любого элемента , который хотите повторить. Таким образом, вы можете изменить свою разметку следующим образом: 

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