[Nuxt.js][Vuetify]詳細ウィンドウに一覧ページ時と同じデータ(文字列)を表示させたい

Question

###解決したいこと
nuxt.jsとvuetifyを使って開発をしています。
一覧ページにある各詳細ボタンを押すと、各詳細ウィンドウが表示される機能を実装したいと考えています。
現在は、その機能をVuetifyのoverlayを使ってモーダルウィンドウのように表示されます。
ですが、１番目の詳細ボタンをクリックすると、最後（４番目）の文字列が表示されてしまいます。

一覧と詳細を同じ文字列が表示されるには、どのようにすれば良いでしょうか。もしくは、overlayではない他の方法が良いのでしょうか。

知識不足もあり、調べても分からなかったので、どなたか教えて頂きたいです。

###現在の状態

<template>
<v-app>
:
:
  <v-main>
    <v-container>
      <v-row>
        <v-col 
          v-for= "place in places"
          :key = "place"
          cols = "12"
          xs = "12"
          sm = "3"
        >
        <v-card 
          justify = "space-around"
        >
          <v-card-text class="my-0 pa-2 black--text">
            <div v-text= "place.ruby"></div>
            <div 
              class = "text-h6"
              v-text = "place.place"
            >
            </div>
          </v-card-text>
            <v-divider class="my-2"></v-divider>
          
          <v-card-actions class ="justify-center">
              <v-btn 
                block
                color ="green white--text lighten-1" 
                class ="ma-2"
                @click="overlay = !overlay"
              >
                詳細                     //この詳細ボタンを押すと詳細ウィンドウが表示される
                <br/>
                  <v-icon>mdi-chevron-double-down</v-icon>
              </v-btn>
          </v-card-actions>
          <div @click ="overlay = false">
          <v-overlay :value="overlay" >
            <v-container>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//ウィンドウ内の表示内容
              <v-row >
              <v-col >
                <v-card 
                  class ="white"
                  width ="400"
                >
                  <v-card-text class ="black--text"> 
                    <div v-text= "place.ruby"></div>
                    <div 
                      class ="text-h6"
                      v-text= "place.place"
                      >
                    </div>
                    <div v-text = "adress.place></div>
                    <v-divider class ="grey lighten-2 my-2"></v-divider>
                  </v-card-text>
                  <v-card-actions class ="justify-center">
                    <v-btn
                    color ="success"
                    class ="ma-5"
                    @click="overlay = false"
                    >
                    close</v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
              </v-row>
            </v-container>
          </v-overlay>
          </div>
        </v-card>

        </v-col>
      </v-row>
      
    </v-container>
  </v-main>
</v-app>
</template>

<script>
export default {
  data: () => ({
      // modalwindow 
    absolute: true,
    overlay: false,
      // output 
    places: [
      {id: '1', ruby: 'しょしゃぐりーんくらぶ', place: '書写グリーン倶楽部', adress: '兵庫県姫路市' },
      {id: '2', ruby: 'おおくぼすいじょうごるふせんたー', place: '大久保水上ゴルフセンター', adress: '兵庫県明石市'},
      {id: '3', ruby: 'ごるふぷらざこうべ', place: 'ゴルフプラザ神戸', adress: '兵庫県神戸市'},
      {id: '4', ruby: 'あまがさきてくのらんど', place: '尼崎テクノランド', adress: '兵庫県尼崎市'}

    ]

  }),
}
</script>

一覧ページ

１番目の詳細を開いた状態

###補足
現在の詳細ページには、所在地のみが追加されていますが、まだ他にも追加で表示する予定です。
data内の「ruby」は、ルビ、つまり、ふりがなです。

###使用環境
Nuxt.jsバージョン
@nuxt/cli v2.15.8

Vue.jsバージョン
vue@2.6.14

Vuetifyバージョン
@nuxtjs/vuetify@1.12.1

Answer 1

places のループの中に v-overlay を書いているので、4つ（ places の要素数分）オーバーレイが作らています。
overlay が true になると4つのオーバーレイがすべて重ねて描画されて、見た目としては一番上にある最後のものだけが表示されるように見えています。

やり方はいろいろあると思いますが、オーバーレイを1つのみ表示するようにすればできると思います。

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col v-for="place in places" :key="place.id" cols="12" xs="12" sm="3">
            <v-card justify="space-around">
              <v-card-text class="my-0 pa-2 black--text">
                <div v-text="place.ruby"></div>
                <div class="text-h6" v-text="place.place"></div>
              </v-card-text>
              <v-divider class="my-2"></v-divider>

              <v-card-actions class="justify-center">
                <v-btn
                  block
                  color="green white--text lighten-1"
                  class="ma-2"
                  @click="selectedPlace = place"
                >
                  詳細
                  <br />
                  <v-icon>mdi-chevron-double-down</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
        <div v-if="overlay" @click="selectedPlace = null">
          <v-overlay :value="overlay">
            <v-container>
              <v-row>
                <v-col>
                  <v-card class="white" width="400">
                    <v-card-text class="black--text">
                      <div v-text="selectedPlace.ruby"></div>
                      <div class="text-h6" v-text="selectedPlace.place"></div>
                      <div v-text="selectedPlace.address"></div>
                      <v-divider class="grey lighten-2 my-2"></v-divider>
                    </v-card-text>
                    <v-card-actions class="justify-center">
                      <v-btn
                        color="success"
                        class="ma-5"
                        @click="selectedPlace = null"
                      >
                        close</v-btn
                      >
                    </v-card-actions>
                  </v-card>
                </v-col>
              </v-row>
            </v-container>
          </v-overlay>
        </div>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    selectedPlace: null,
    places: [
      {
        id: '1',
        ruby: 'しょしゃぐりーんくらぶ',
        place: '書写グリーン倶楽部',
        address: '兵庫県姫路市',
      },
      {
        id: '2',
        ruby: 'おおくぼすいじょうごるふせんたー',
        place: '大久保水上ゴルフセンター',
        address: '兵庫県明石市',
      },
      {
        id: '3',
        ruby: 'ごるふぷらざこうべ',
        place: 'ゴルフプラザ神戸',
        address: '兵庫県神戸市',
      },
      {
        id: '4',
        ruby: 'あまがさきてくのらんど',
        place: '尼崎テクノランド',
        address: '兵庫県尼崎市',
      },
    ],
  }),
  computed: {
    overlay: function () {
      return !!this.selectedPlace
    },
  },
}
</script>

Comments

[bardy]

回答ありがとうございます！
確かに、表示場所が一つしかないので、overlayを内側に入れてしまうと４つが重なるということですね。
あと、overlay側のv-text要素が、「cannot read property " " of defined」などのエラーが出たので、
<div
v-if= "selectedPlace"
v-text = "selectedPlace.ruby"
></div>
とそれぞれ書いたところエラーは消えました。
ですが、今度「Computed property "overlay" was assigned to but it has no setter.
」とエラーが出たので、調べているのですが、なぜか原因はわかりますでしょうか。

[aaharu]

overlayをv-modelで使ってたり代入しようとしてますか？

[bardy]

詳細ボタン側のclick要素を修正し忘れていました！すいません！
全部しっかり表示できるようになりました。ありがとうございます。

ちなみに、これを書けるようには、javascriptの勉強をもっとしたほうがいいんでしょうか。。。

[aaharu]

質問されてる内容はVue.jsなのですが、Vue.jsの前にある程度HTML,JSになれておかないと躓きやすいんじゃないかと思いました。
いきなりVue.jsでVuetifyとなるとなにか良い参考やサンプルがないと難しいと思うのですが、パッとはよいサンプル思いつかないですね。

[bardy]

そうですか、progateなんかはやったんですが、全然足りないですね。。。。
もっと精進します。
ありがとうございました！