Multiple speed-dial with vuetify

Question

I want to have multiple speed-dials in table, one for each row. But when I open one of them, activator opens all. In the Data object there is property 'fab' and it is initially set to false.

<v-data-table
        :headers="testHeaders"
        indeterminate: false
        :items="testDesserts"
        :search="searchWord"
        :loading="loading"
        class="elevation-1 mt-1"
        hide-actions
        expand
        item-key="id_doc"
        no-data-text="Нема доступних података..."
      >
        <template slot="items" slot-scope="props">
          <tr @click="props.expanded = !props.expanded;"
            style="cursor: pointer;">
          <td>{{ props.item.receiver_full_name }}</td>
          <td>{{ props.item.id_doc }}</td>
          <td>{{ props.item.note }}</td>
          <td>

            <v-speed-dial
              v-model="fab"
              transition="scale-transition"
              fixed
              direction="left"
              open-on-hover
                    >
                  <v-btn slot="activator" fab flat small color="info">
                      <v-icon>account_circle</v-icon>
                      <v-icon>close</v-icon>
                  </v-btn>
                  <v-btn fab small flat color="info">
                      <v-icon>search</v-icon>
                  </v-btn>
                  <v-btn fab small flat color="primary">
                      <v-icon>edit</v-icon>
                  </v-btn>
                  <v-btn fab small flat color="error">
                      <v-icon>delete</v-icon>
                  </v-btn>
              </v-speed-dial>

          </td>
          <!--  -->
        </tr>
        </template>

Please help...

Answer 1

I solved this by changing the v-model in the v-speed-dial and v-btn to :id="xxx"

In my case, the 'idx' is the index of the v-for, but it could probably be any unique identifier.

Like this:

          <v-speed-dial
            :id="idx"
            bottom
            right
            absolute
            direction="left"
            transition="slide-x-transition"
          >
            <template v-slot:activator>
              <v-btn :id="idx" color="blue-grey" dark fab>
                <v-icon>settings</v-icon>
                <v-icon>close</v-icon>
              </v-btn>
            </template>
            <v-btn ...

            </v-btn>
          </v-speed-dial>