VueJS Vuetify how to fire activator from table row clicked

Question

<v-dialog v-if="currentSelection != null" persisten t max-width="500px">
  <v-btn slot="activator" @click.native.stop="true" color="primary" dark>Accept
    <v-icon dark right>check_circle</v-icon>
  </v-btn>
  ....
</v-dialog>

I am trying to pop up a v-dialog when a data-table row clicked. How can I set the activator of above dialog tag's to data table rows? For now it only pops when I clicked the "Accept" button which is between v-dialog tags. Thank you for your interest. I am a newbie for now in front-end.

<v-data-table
    :headers="headers"
    :items="xxx"
    :pagination.sync="dataTableOptions.pagination"
    :total-items="dataTableOptions.totalItems"
    :loading="dataTableOptions.loading"
    class="elevation-1">
  <template slot="items" slot-scope="props">
    <tr @click="changeSelectedVariable(props.item)">
      <td>{{ props.item.group.description }}</td>
      <td>{{ props.item.key }}</td>
      <td>{{ props.item.value }}</td>
    </tr>
  </template>
</v-data-table>

ittus ittus · Accepted Answer · 2018-10-09T13:47:26

You can pass value to dialog to make it active:

<v-dialog :value="!!currentSelection" persistent max-width="500px">

</v-dialog>

I suppose you change value of currentSelection in changeSelectedVariable function

VueJS Vuetify how to fire activator from table row clicked

1 Answers