Open Modal Vuetify

Question

Open Modal Vuetify

Navigation

#1 by (3 votes)

2

I'm having trouble opening a Modal with Vue, I'm using Vuetify, I can open it, as they show in the documentation, but I can not open it, 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 this case, I tried to open it this way:

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

But it quickly opens and closes alone. Also, there is the Picker also, which I saw in the documentation that I have the% prop% of which receives a function, but it does not give an example of how to open, can anyone 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>

javascript vue.js

asked by anonymous 17.08.2017 / 20:11

1 answer

Bar chart made in Python was "weird". Any suggestions on how to improve it? RelationsShips Larval 5.4 Accessing search data with with?

score 3 · Accepted Answer

To get this to work you have to have a component (via data , props or computed ) dialog in your component, which is what Vuetify expects. Then just change the status of this value between true and false .

Note that v-dialog uses v-model="dialog" , this means that it is birectional, 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><scriptsrc="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>