Question

我想在表中有多个快速拨号，每行一个。但是，当我打开其中一个时，激活器将全部打开。在数据对象中具有属性“ 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>

请帮助...

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

带有vuetify的多重快速拨号

1 个答案: