for文で表示させた外部APIのデータを別な場所で表示させたい

前提・実現したいこと

取得したGoogleBooksAPIのデータをfor文で取り出して表示していますが、for文で表示したデータをユーザーがクリックするとselectBookに表示されるという動作を実現したいです。どなたか知恵を貸して頂けないでしょうか。

該当のソースコード

template
1        <v-container>
2          <v-sheet>
3            <v-card
4              v-for="book in books"
5              :key="book.id"
6              class="ma-0"
7            >
8              <v-row>
9                <v-cols class="my-4 ml-7">
10                  <img :src="image(book)">
11                </v-cols>
12                <v-cols>
13                  <v-card-title>{{ title(book) }}</v-card-title>
14                  <v-card-text>{{ authors(book) }}</v-card-text>
15                </v-cols>
16              </v-row>
17            </v-card>
18            <v-card-actions>
19              <v-spacer />
20              <v-btn
21                color="green darken-1"
22                text
23                @click="dialog = false"
24              >
25                閉じる
26              </v-btn>
27            </v-card-actions>
28　　　　　　　　　　　　　　　　　　　　　　　<div class="selectBook">
29             //ここにデータを表示したい
30           </div>
31          </v-sheet>
32        </v-container>
33

script
1  data () {
2    return {
3      books: [],
4      keyword: '',
5      dialog: false,
6      url: 'https://www.googleapis.com/books/v1/volumes?q=',
7    }
8  },
9
10  methods: {
11    get () {
12      this.$axios.get(this.url + this.keyword + '&maxResults=15')
13        .then(this.setBooks).catch(this.setError)
14    },
15    // APIリクエスト後の処理
16    setBooks (res) {
17      this.books = res.data.items
18    },
19    // 取得した書籍データの設定
20    title (valu) {
21      return valu.volumeInfo.title ? valu.volumeInfo.title : 'No title'
22    },
23    getBook: {
24      authors (valu) { return valu.volumeInfo.authors ? valu.volumeInfo.authors : 'No authors' },
25      image (valu) { return valu.volumeInfo.imageLinks ? valu.volumeInfo.imageLinks.thumbnail : noImage }
26    }
27  }
28}
29</script>
30

試したこと

・別な値に代入して表示させる。

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

Nuxt 2.15
Rails 6.0.1

winterboum

2021/06/07 06:55

「表示したデータをユーザーがクリックすると別な場所に表示される」というのが曖昧で回答しにくいｄせえす表示したデータのどこなのか、 view のcodeで教えてください。別な場所というのは具体的にはなに？表示されるデータとはどの変数（とかmodel）に入っているデータ？

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

回答1件

ベストアンサー

実現したいことになっているかはわかりませんが、下記でいかがでしょうか？
CSSとかは特に入れておりませんので、適宜入れていただけますと幸いでございます。　
一旦カード全体をクリック検知しておりますが、タイトルのみにしたい場合等は@click="select(book)"を適宜移動してくださいませ。

vue
1        <v-container>
2          <v-sheet>
3            <v-card
4              v-for="book in books"
5              :key="book.id"
6              class="ma-0"
7              @click="select(book)"
8            >
9              <v-row>
10                <v-cols class="my-4 ml-7">
11                  <img :src="image(book)">
12                </v-cols>
13                <v-cols>
14                  <v-card-title>{{ title(book) }}</v-card-title>
15                  <v-card-text>{{ authors(book) }}</v-card-text>
16                </v-cols>
17              </v-row>
18            </v-card>
19            <v-card-actions>
20              <v-spacer />
21              <v-btn
22                color="green darken-1"
23                text
24                @click="dialog = false"
25              >
26                閉じる
27              </v-btn>
28            </v-card-actions>
29　　　　　　 <div class="selectBook">
30             <template v-if="selectedBook != null">
31               <!-- 選択されたデータの表示 -->
32               <h2>{{ title(selectedBook) }}</h2>
33               <p>{{ authors(selectedBook) }}</p>
34               <img :src="image(selectedBook)">
35               <button @click="clearBook()">選択の解除</button>
36             </template>
37           </div>
38          </v-sheet>
39        </v-container>

javascript
1  data () {
2    return {
3      books: [],
4      selectedBook: null,
5      keyword: '',
6      dialog: false,
7      url: 'https://www.googleapis.com/books/v1/volumes?q=',
8    }
9  },
10
11  methods: {
12    // 本の選択
13    select (book) {
14      this.selectedBook = book
15    },
16    // 本の選択の解除
17    clearBook () {
18      this.selectedBook = null
19    },
20    get () {
21      this.$axios.get(this.url + this.keyword + '&maxResults=15')
22        .then(this.setBooks).catch(this.setError)
23    },
24    // APIリクエスト後の処理
25    setBooks (res) {
26      this.books = res.data.items
27    },
28    // 取得した書籍データの設定
29    title (valu) {
30      return valu.volumeInfo.title ? valu.volumeInfo.title : 'No title'
31    },
32    getBook: {
33      authors (valu) { return valu.volumeInfo.authors ? valu.volumeInfo.authors : 'No authors' },
34      image (valu) { return valu.volumeInfo.imageLinks ? valu.volumeInfo.imageLinks.thumbnail : noImage }
35    }
36  }
37}
38</script>