I've been experimenting with various aspects of vue.js such as methods, directives, loops, and higher order functions, including working with $this.refs...
The main objective is to show a book description when the title (which is a button element in the vue.js template) is clicked - the rendering works perfectly:
<section v-for="(bookTitle, index) in books"
v-bind:key="index"
>
<button
ref="el"
@click="hidden = !hidden"
class="list-group-item"
v-if="bookTitle.title"
>{{bookTitle.title}}
</button></section>
I have retrieved data from an API and structured it into a data array:
mounted() {
fetch("https://www.googleapis.com/books/v1/volumes?q=%22coding%22", {
method: "get",
})
.then((res) => {
return res.json();
})
.then((result) => {
let title;
let description;
let authors;
let id;
for (var i = 0; i < result.items.length; i++) {
title = result.items[i].volumeInfo.title;
description = result.items[i].volumeInfo.description;
authors = result.items[i].volumeInfo.authors;
id = result.items[i].id;
this.bookData.push(
{
available: true,
title,
id
},
{
authors,
description,
id
}
It's possible that my object structure might be causing issues. If there's a simple way to achieve the desired outcome within a vue.js project, I would appreciate any assistance. Thanks.