Vue.jsでリストをクリックした時にコンポーネントを呼び出す

前提・実現したいこと

Vue.jsでリスト(v-list)の特定の行をクリックした時に
"@components/"に予め作成済のコンポーネントを呼び出す方法を教えてください。
この呼び出そうとしているコンポーネントはdialogの予定です。

元となるシンプルなソース

js
1<template>
2  <div class="home">
3    <v-list>
4      <v-list-item-group v-model="item">
5        <v-list-item
6          v-for="item in items"
7          :key="item"
8        >
9          <v-list-item-content>
10            <v-list-item-title v-text="item"></v-list-item-title>
11          </v-list-item-content>
12        </v-list-item>
13      </v-list-item-group>
14    </v-list>
15  </div>
16</template>
17
18<script>
19export default {
20  data(){
21    return {
22      item: '',
23      items: ['List 1','List 2','List 3','List 4'],
24    }
25  }
26}
27</script>
28

補足情報（FW/ツールのバージョンなど）

vue -V @vue/cli 4.5.6
yarn -v 1.22.5

行動規範の内容に同意します

回答1件

ベストアンサー

以下でどうでしょうか？

vue
1<template>
2  <div class="home">
3    <v-list>
4      <v-list-item-group v-model="item">
5        <v-list-item
6          v-for="item in items"
7          :key="item"
8          @click="selectItem(item)"
9        >
10          <v-list-item-content>
11            <v-list-item-title v-text="item"></v-list-item-title>
12          </v-list-item-content>
13        </v-list-item>
14      </v-list-item-group>
15    </v-list>
16    <dialog v-if="isOpen" :item="item" />
17  </div>
18</template>
19
20<script>
21import dialog from @components/dialog.vue"
22export default {
23  components: {
24   dialog
25  },
26  data(){
27    return {
28      item: '',
29      items: ['List 1','List 2','List 3','List 4'],
30      isOpen: false
31    }
32  },
33  methods: {
34   selectItem(item) {
35      this.item = item;
36      this.isOpen = true
37    }
38  }
39}
40</script>