Vuetifiy の一覧に戻る

Vuetify で activator を使わないでダイアログを開け締めする方法

ダイアログの中に開け締めのための activator のボタンをもたせるのではなく、親の view のなにかのアクションに連動させて開けしめしたいことがあります

そんな時はAccessing Child Component Instances & Child Elements (opens new window)にあるように、下のようにダイアログに ref attribute を定義して

<template>
  <EditDialog ref="edit"></EditDialog>
</template>

親からは this.$refs.edit で操作するようにする方法が便利です

例えばダイアログには default で false な v-model を定義しておいて、それを true にしたり false にしたりする method opne(), close() を定義しておいて

<template>
  <v-dialog
    v-model="dialog"
  >
…
  </v-dialog>
 </template>

 <script>
 export default {
  data () {
    return {
      dialog: false,
    }
  },
  methods: {
    open() {
      this.dialog = true;
    },
    close(){
      this.dialog = false
    },
  }
}
 </script> 

親からは this.$refs.edit.open()、this.$refs.edit.close()を呼ぶことで開けしめができます

感想

Accessing Child Component Instances & Child Elements (opens new window) って Edge Cases (opens new window) って言われてるんですけど、プロパティとイベントでは済まない、ダイナミックに子をさわりたい事って全然普通にあると思っていて、$ref で子を直接さわるほうが基本的な操作で、これなしだと実装に困ってしまうような機能だと思ってます。むしろプロパティとイベントのほうがあると便利だけどコーナーケースな気がしてます。

---