vuetify: par programme montrant la boîte de dialogue

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

Cependant, je suis assez difficile sur ce que cela signifie. En disant "l'utilisation de v-modèle" est vague, au mieux. Le composant parent sait sur le programme d'installation si elle doit s'ouvrir, mais je ne sais pas comment modifier dynamiquement les ce dans l'enfant. Suis-je censé passer à l'aide de v-lier?

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

Si oui, comment le composant enfant face à cette situation?

Vuetify boîte de Dialogue infos ici: https://vuetifyjs.com/components/dialogs

Cela dépend de comment vous définissez la dialog composant, Presentational / Container composant? À l'aide de v-model (par défaut à partir de la doc) supposons que vous l'utiliser comme un composant conteneur avec data spécifié au lieu de transmettre props.

OriginalL'auteur jpro | 2017-06-08

  1. 3

    v est une directive. Vous utilisez v-model, pas v-bind.

    La page, vous lien a plusieurs exemples. Si vous cliquez sur le <> bouton sur le premier, il montre la source HTML de

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

    v-model fait une liaison bidirectionnelle sur un support qui est nommé value à l'intérieur du composant. Lorsque vous définissez la variable liée valeur de true, la boîte de dialogue affichera; quand false, il va se cacher. Aussi, si la boîte de dialogue est fermée, il va fixer la valeur de la variable à false.

    je suis en utilisant le code fourni dans une coutume "login". la propriété "valeur" doit être défini par le parent et non pas à l'aide de l'intégré dans le bouton. je suis peut-être difficile de savoir comment définir la valeur de propriété d'un composant enfant de la mère.
    Dans ce cas, vous utilisez v-model="somevariable" où somevariable est le membre de la société mère que vous souhaitez contrôler la boîte de dialogue.
    "v-modèle a été dépréciée" - Vue
    stackoverflow.com/questions/51821960/...

    OriginalL'auteur Roy J

  2. 4

    Que je comprends que vous avez un enfant de composants qui ont une boîte de dialogue à l'intérieur. Pas sûr que ce soit à 100%, mais c'est la façon dont je la mettre en œuvre. Composant enfant avec 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)
             }
      }
}

    en composant parent nous les utilisons:

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

data () {
  return {
    myDialogVisible: false
  }
},
methods: {
  myDialogClose () {
    this.myDialogVisible = false
    //other code
  }
}

    OriginalL'auteur Дмитрий Алферьев