I'm having an issue with displaying a specific value based on an onclick event. The value is taken from an object in the bookData array:
this.bookData.push(
{
avalable: true,
titles: [title, id],
author: authors,
descriptions: [description, id]
})
I've written some code to display the descriptions value using an onclick event within vue.js templates. All values are related to this object (with keys fetched from a Google Books API). Here's the code snippet:
//bookData == books when transferred to the child component...
<section v-for="(bookTitle, index) in books"
v-bind:key="index"
>
<button
:ref="'el'+ index"
@click="hidden = !hidden"
class="list-group-item"
v-if="bookTitle.titles"
>{{bookTitle.titles[0]}}
</button>
<p v-if="!hidden">
{{
bookTitle.titles[id] == bookTitle.descriptions[id] ?
"'DESCRIPTION:'\n" + bookTitle.descriptions :
console.log("it works")
}}
</p>
...
data() {
return {
hidden: true,
}
}
When I click on any button, all description values are displayed below all the button elements instead of only showing the description corresponding to the clicked button. I want the desired description to be shown below the clicked button and only once.
If anyone has a solution (maybe a method inside the methods:{}), any help or advice would be greatly appreciated. I am new to Vue.js. Thank you in advance. :)