Some questions about v-for

[marcosvalens]

Hello everyone, I’m starting with quasar and I’m creating a website where I have to use several loops.

• My first question is about a loop that traverses an array of objects and then creates components called cards, more specifically the cards that also have tabs inside them. How can I change the value of the v-model attribute inside the q-tabs component?
  Not being able to change it, when I switch between tabs of a card, all the cards are changed at the same time.
  I leave you with the piece of code that this question refers to:

<div class="col-lg-3 col-xs-12 q-ma-none q-pa-sm" v-for="work in works">
                <q-card class="my-card full-height">
                  <img :src="work.url">
                  <q-card-section>
                    <div class="text-h6">{{work.date}}</div>
                    <div class="text-subtitle2 text-negative">{{work.company}}</div>
                  </q-card-section>
                  <q-tabs v-model="tab" /*<--------- THIS IS THE ATTRIBUTE THAT I WANT TO CHANGE*/
                          dense
                          active-color="negative"
                          indicator-color="negative"
                          align="justify"
                          narrow-indicator>
                    <q-tab label="Cargos" name="one"/>
                    <q-tab label="Información" name="two"/>
                  </q-tabs>
                  <q-separator/>
                  <q-tab-panels v-model="tab" animated> /*<--THIS IS THE ATTRIBUTE THAT I WANT TO CHANGE*/
                    <q-tab-panel name="one">
                      <ul class="q-pa-none">
                        <q-list>
                          <q-item clickable v-ripple v-for="cargo in work.cargos">
                            <li>
                              <q-item-section>
                                <q-item-label>{{cargo}}</q-item-label>
                              </q-item-section>
                            </li>
                          </q-item>
                        </q-list>
                      </ul>
                    </q-tab-panel>
                    <q-tab-panel name="two">
                      <ul class="q-pa-none">
                        <q-list>
                          <q-item clickable v-ripple v-for="advice in work.advices">
                            <li>
                              <q-item-section>
                                <q-item-label>{{advice}}</q-item-label>
                              </q-item-section>
                            </li>
                          </q-item>
                        </q-list>
                      </ul>
                    </q-tab-panel>
                  </q-tab-panels>
                </q-card>
              </div>

• My other question is very similar to the previous one, the only thing I want to know is how can I change the class to each element inside the loop?, for example, let’s say I want to use four divs and each one with a different background, applying different widths of column, etc…

• And last but not least, I have some divs that when passing the mouse over some methods are executed, this is a very nice effect but let’s say that I have many different methods that apply different effects, how do I give the correct name of the methods to each of the elements within the loop?

[s.molinari]

You need to have the tab data in the “works” object or array for each “work”.

Scott

[marcosvalens]

This post is deleted!

[marcosvalens]

@s-molinari Thanks a lot!! it works, Would you know to answer the other two questions?

[s.molinari]

You could have generic methods and enter the key of the “work” object as a parameter for those methods to identify which “work” object needs manipulating and do your logic accordingly. Sounds awfully complex though, so you will probably want to break out your “divs” into their own components with their own logic.

Scott

[marcosvalens]

@s-molinari Thanks a lot!! i will try it later.