web-dev-qa-db-ja.com

vuetify：プログラムでダイアログを表示

vuetifyは言う：プログラムでダイアログを開いたり閉じたりしたい場合は、ブール値を指定したv-modelを使用して行うことができます。

しかし、私はこれが何を意味するのか全く分かりません。 「v-modelを使用する」と言うのはせいぜい曖昧です。親コンポーネントは、開く必要があるかどうかをセットアップで認識していますが、子でこれを動的に変更する方法がわかりません。 vバインドを使用して渡す必要がありますか？

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

もしそうなら、子コンポーネントはこれをどのように処理しますか？

Vuetify Dialogの情報： https://vuetifyjs.com/components/dialogs

vue.jsvuetify.js
6
jpro

v-model はディレクティブです。 v-modelではなくv-bindを使用します。

リンクするページにはいくつかの例があります。最初のボタンの<>ボタンをクリックすると、HTMLソースが表示されます

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

v-modelは、コンポーネント内でvalueという名前のプロップに双方向バインディングを作成します。バインドされた変数の値をtrueに設定すると、ダイアログが表示されます。 falseの場合、非表示になります。また、ダイアログを閉じると、変数の値がfalseに設定されます。

6
Roy J

私が理解しているように、あなたはその中にダイアログを持つ子コンポーネントを持っています。これが100％正しいかどうかはわかりませんが、これが私が実装する方法です。ダイアログ付きの子コンポーネント：

<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)
             }
      }
}

親コンポーネントで使用します。

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

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

ДмитрийАлферьев 答えは正しいですが、ダイアログを閉じるときにv-dialogがv-modelをfalseに変更しようとするので、propsをv-modelとpropsの値に渡したため、「Apropの直接変更は避けてください」という警告が表示されます。変更されません。警告を防ぐには、: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');
            }
        }

親に

<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