vue. js - проблема с получением и отображением требуемого значения от объекта - onclick

Question

Я много чего пробовал с vue. js методами, директивами, различными циклами и функциями более высокого порядка, и много чего пробовал с $this.refs ... Цель состоит в том, чтобы отобразить описание книги при нажатии на заголовок (это элемент кнопки - шаблон vue. js, и его рендеринг работает нормально - отображается правильно):

<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>

Я получил API, и сделал массив данных из его свойств:

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(
      
        {
        avalable: true, 
        title,
        id
        },
        {
        authors,
        description,
        id
        }

Возможно, проблема в моей формулировке объектов. Если есть какой-то простой способ достичь этой цели в проекте vue. js, пожалуйста, помогите. Спасибо.

Answer 1

При создании объекта bookData есть свойство показывать кнопку (showButton), и при щелчке на ней она становится ложной. См. Код ниже.

Рабочий пример: здесь

this.bookData.push(      
{
   avalable: true, 
   title,
   id,
   description,
   showButton = true
}

и в шаблоне на основе этого либо отображается кнопка, либо название книги. Здесь нет необходимости использовать элемент ref.

<section  v-for="(bookTitle, index) in books"
   v-bind:key="index"
   >
   <button
      @click="bookTitle.showButton = !bookTitle.showButton"
      class="list-group-item"
      v-if="bookTitle.showButton"
      >{{bookTitle.title}}
   </button>
   
  <!-- Have the logic for title here -->
  <h2 v-if="!bookTitle.showButton">{{bookTitle.description}}</h2>
</section>