Início / coding / Perguntas / 78380882
Accepted
timbre timbre
Asked: 2024-04-25 03:45:36 +0800 CST

Divisão do Tailwind com v-for do Vue3

  • 772

Estou tentando aplicar os Tailwind's dividenas divs criadas com v-foro Vue3:

<div v-for="(i) in [1, 2, 3]" class="divide-y divide-red-400">
  <div>{{ i }}</div>
</div>

Mas nenhum divisor é aplicado:

insira a descrição da imagem aqui

Espero ver isso:

insira a descrição da imagem aqui

(Observação: esta imagem foi criada com as mesmas divs pai class, mas sem v-forloop, apenas adicionando estaticamente divs filhos)

Então, existe alguma maneira de aplicar divisor aos itens em v-forloop? Qualquer alternativa que produza o mesmo efeito também serviria. Obrigado

vue.js

1 respostas

  1. Best Answer

    As divide-y-*classes são projetadas de forma que fiquem no pai dos elementos que devem ser divididos. Portanto, você adicionaria as divide-y-*classes ao pai do elemento que possui a v-fordiretiva. Isso ocorre porque é o elemento da v-fordiretiva que se repete:

    Vue.createApp().mount('#app');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.25/vue.global.prod.min.js" integrity="sha512-sT2a1EG7Kmio5Wia95orR00Ar8F78KIVv/AHrV0998mocqYsjoG2YiYCARXrXdaMog05zYTrtaVG3+uW4UhVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app" class="divide-y divide-red-400">
  <div v-for="(i) in [1, 2, 3]">
    <div>{{ i }}</div>
  </div>
</div>

    • 1

relate perguntas