web-dev-qa-db-fra.com

vuetify: affichage de la boîte de dialogue par programme

vuetify dit: Si vous voulez ouvrir ou fermer la boîte de dialogue par programme, vous pouvez le faire en utilisant v-model avec une valeur booléenne.

Cependant, je ne sais pas trop ce que cela signifie. Dire "en utilisant le modèle v" est au mieux vague. Le composant parent sait lors de la configuration s'il doit s'ouvrir mais je ne sais pas comment changer dynamiquement cela chez l'enfant. Suis-je censé le passer en utilisant v-bind?

<login v-bind:showDialog></login>

Si oui, comment le composant enfant gère-t-il cela?

Informations de dialogue Vuetify ici: https://vuetifyjs.com/components/dialogs

vue.jsvuetify.js
6
jpro

v-model est une directive. Vous utiliseriez v-model, ne pas v-bind.

La page que vous liez contient plusieurs exemples. Si vous cliquez sur le <> sur le premier, il montre la source HTML de

<v-dialog v-model="dialog">

v-model crée une liaison bidirectionnelle sur un accessoire nommé value à l'intérieur du composant. Lorsque vous définissez la valeur de la variable liée sur true, la boîte de dialogue s'affiche; quand false, il se cachera. De plus, si la boîte de dialogue est fermée, elle définira la valeur de la variable sur false.

6
Roy J

Si je comprends bien, vous avez un composant enfant qui contient une boîte de dialogue. Je ne suis pas sûr que ce soit 100% correct, mais c'est ainsi que je l'implémente. Composant enfant avec boîte de dialogue:

<template>
  <v-dialog v-model="intDialogVisible">
...
</template>

<script>
...
export default {
props: {
    dialogVisible: Boolean,
    ...
},
computed: {
    intDialogVisible: {
      get: function () {
        if (this.dialogVisible) {
          // Some dialog initialization code could be placed here
          // because it is called only when this.dialogVisible changes
        }

        return this.dialogVisible
      },
      set: function (value) {
             if (!value) {
               this.$emit('close', some_payload)
             }
      }
}

dans le composant parent, nous l'utilisons:

<my-dilaog :dialogVisible="myDialogVisible"
           @close="myDialogClose">
</my-dialog>

data () {
  return {
    myDialogVisible: false
  }
},
methods: {
  myDialogClose () {
    this.myDialogVisible = false
    // other code
  }
}
9
Дмитрий Алферьев

Дмитрий Алферьев la réponse est correcte mais obtenez l'avertissement "Évitez de muter un accessoire directement", car lorsque vous fermez la boîte de dialogue, v-dialog essaie de changer le modèle v en faux, tandis que nous passons les accessoires au modèle v et la valeur des accessoires ne changera pas. pour éviter l'avertissement, nous devons utiliser :value, @input

<template>
    <v-dialog :value="dialog" @input="$emit('update:dialog',false)" @keydown.esc="closeDialog()" >
    ...
    </v-dialog>
</template>
<script>
    export default {
        props: {
            dialog: Boolean
        },
        methods: {
            closeDialog(){
                this.$emit('closeDialog');
            }
        }

Dans le parent

<template>
    <v-btn color="primary" @click="showDialog=true"></v-btn>
    <keep-alive>
        <my-dialog
            :dialog.sync="showEdit"
            @closeDialog="closeDialog"
        >
        </my-dialog>
    </keep-alive>
</template>
<script>
    data(){
        return {
            showEdit:false,
        },
    },
    methods: {
        closeDialog(){
            this.showEdit = false;
        },
    }
0
Mohsen