Level 16
I honestly don't understand what the issue precisely is. Can you elaborate a little more?
I'm not seeing any foreach loop in your markup.
Dec 25, 2021
6
Level 1
How can I format better this div where my information is listed, tailwind, vue
This is how my view looks like now, and I would like that each therapy has like a separate part in this div. https://imgur.com/a/owqtAkj
Here is my code:
<div class="grid md:grid-cols-3 gap-2 w-full mx-auto mt-11 text-gray-700">
<div class="md:col-span-1 ml-20">
<div class="sm:px-0 h-full bg-contain bg-no-repeat bg-center" style="background-image: url('/images/Expert.png')"></div>
</div>
<div class="ml-28 mb-12">
<div class="md:col-span-2 bg-white py-8 px-20">
<h2 class="mb-5 text-center">Appropriate therapy for your problem</h2>
<div class="flex flex-col md:flex-row md:max-w-xl rounded-lg bg-white shadow-lg">
<img class="w-full h-96 md:h-auto object-cover rounded-t-lg md:rounded-none md:rounded-l-lg" style="background-image: url('/images/Sikavica.jpg')" alt="" />
<div class="p-6 flex flex-col justify-start">
<h3 class="text-gray-700 text-base mb-4"
v-for="(therapy, id) in therapies" :key="id" :value="id">{{ therapy }}
</h3>
</div>
</div>
</div>
</div>
</div>
Why I feel confused is because this line v-for="(therapy, id) in therapies" :key="id" :value="id">{{ therapy }} is listing all the three groups of therapies, so I don't know how to format this one, for three that are appearing in view?
Level 1
@mabdullahsari I want to format better this div 'Appropriate Therapy for your problem', to create a separate part for these three therapies, because in the previous form the patined needs to choose 2 symptoms, and in this view three therapies need to be rendered.
But I don't know how to do that because in my view all three therapies are listed in this one line of code v-for="(therapy, id) in therapies" :key="id" :value="id">{{ therapy }}
Level 16
@TikTina If I understand you correctly, you want separate cards / panels (whatever you want to call them) to display each paragraph. Well then just lift the for-loop up:
<div v-for="(therapy, id) in therapies" :key="id" class="flex flex-col md:flex-row md:max-w-xl rounded-lg bg-white shadow-lg">
<!-- other tags -->
<h3>{{ therapy }}</h3>
<!-- other tags -->
</div>
Level 1
@mabdullahsari I tried it, but it's the same, now just with bigger font. Because this is in h3 tag
<h3 class="text-gray-700 text-base mb-4" v-for="(therapy, id) in therapies" :key="id" :value="id">{{ therapy }}
</h3>
The whole line is in this tag.
Level 16
@TikTina Then... don't place it inside the heading? Use a paragraph instead for example?
Level 1
<div class="text-gray-700 text-base mb-4" v-for="(therapy, id) in therapies" :key="id" :value="id">
<p>{{ therapy }}</p>
</div>
I put it like this and it is the sam, and if I put this p tag outside this div then nothing will render?
Please or to participate in this conversation.