使用 vuetify 进行多个快速拨号答案

【问题标题】：Multiple speed-dial with vuetify使用 vuetify 进行多个快速拨号
【发布时间】：2019-07-27 03:00:00
【问题描述】：

我想在表格中有多个快速拨号，每行一个。但是当我打开其中一个时，激活器会打开所有。在 Data 对象中有属性“fab”，它最初设置为 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>

请帮忙...

【问题讨论】：

标签： vuejs2 vue-component vuetify.js

【解决方案1】：

我通过将 v-speed-dial 和 v-btn 中的 v-model 更改为 :id="xxx"

解决了这个问题

在我的例子中，'idx' 是 v-for 的索引，但它可能是任何唯一标识符。

像这样：

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

【讨论】：