vueのrefsでエラーが出ることについて

Question

前提・実現したいこと

vueでモーダル画面を表示したい。
該当ファイルの”-----略-----”の部分の表示を行いたい

###発生している問題・エラーメッセージ
choromeのコンソールには以下が出ています
TypeError: this.$refs[a].open is not a function

###該当のソースコード
a.vueファイル
<template>
hoge(@click="openDialog('address')")
dialog(ref="address")
-----略-----

<script> export default { methods: { openDialog(a) { this.$refs[a].open() } } } ### 試したこと @clickを@click.stopに修正して、メソッド呼び出しをやめてみた 変数を使わず直に記載して変数"a"を"address"と記載する ### 補足情報（FW/ツールのバージョンなど） npm 6.13.0 node v12.13.0 package.json{ "dependencies": { "@vue/cli": "^4.0.5", "jquery": "^3.4.1", "vuex": "^3.1.1", } } 足りていない情報もあるかと思いますがよろしくお願いいします

Answer 1

子コンポーネントを呼び出しているところ、refを付けてあげたら動くと思いますが、いかがでしょう。

↓私の環境はVueのバージョンが違っているのですが、参考までに

<template>
  <div>
    dialog test
    <button @click="openDialog('dialog1')"> open dialog1 </button>
    <dialog-sample ref="dialog1" />
  </div>
</template>
<script>
import DialogSample from './Dalog.vue'
export default {
  components: {
    DialogSample
  },
  methods: {
    openDialog(name) {
      this.$refs[name].open()
    }
  }
}
</script>

<template>
  <div v-show="show">
    DIALOG
    <button @click="close"> close</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    open() {
      this.show = true
    },
    close() {
      this.show = false
    }
  }
}
</script>