Open Modal Vuetify

Question

I’m having difficulty opening a Modal with Vue, I’m using Vuetify, I can open, as they show in the documentation, but I can’t open, just by clicking on a button (for example).

<v-dialog v-model="dialog" width="600px">
    <v-card>
        <v-card-title>
            <span class="headline"></span>
        </v-card-title>
        <v-card-text></v-card-text>
        <v-card-actions>
            <v-btn class="green--text darken-1" flat="flat" @click.native="dialog = false">Fechar</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

In that case, I tried to open it this way:

<v-btn primary flat @click.native="dialog = true" slot="activator">
    Detalhes
</v-btn>

But quickly it opens and closes alone. Besides, there’s Picker too, which I saw in the documentation that I have the prop opened who gets a function, but he doesn’t give an example of how to open, someone can help me?

<v-date-picker v-model="e4" autosave="true" scrollable locale="pt-br" format="DD/MM/YYYY" :date-format="date => new Date(date).toLocaleDateString()" :formatted-value.sync="formatted">
</v-date-picker>

Answer 1

To have it working you must have in your component a property (via data, props or computed) dialog, which is what Vuetify expects. Then just change the state of that value between true and false.

Note that the v-dialog uses v-model="dialog", this means that it is birecional, IE when the dialog closes it will change back the value of the property to false.

new Vue({
  el: '#app',
  data() {
    return {
      dialog: false
    }
  }
})

p {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccf;
}

<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
  <p @click="dialog = true">Clica aqui!</p>
  <v-app id="inspire">
    <v-dialog v-model="dialog" width="600px">
      <v-card>
        <v-card-title>
          <span class="headline"></span>
        </v-card-title>
        <v-card-text></v-card-text>
        <v-card-actions>
          <v-btn class="green--text darken-1" flat="flat" @click.native="dialog = false">Fechar</v-btn>

        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</div>