基于 vue.js 模板显示所需值的问题

Question

我在根据 onclick 事件显示想要的值时遇到问题。值来自 bookData 数组中的一个对象：

this.bookData.push(
            {
            avalable: true, 
            titles: [title, id],
            author: authors,
            descriptions: [description, id]
            })

我输入了一段代码，目的是使用以下 vue.js 模板通过 onclick 事件显示描述值。一切都需要与这个对象相关（他的键中的值是从谷歌书籍 API 中获取的）这是代码：

//bookData == books  when transfered 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,
      }
    }

问题是当我点击随机按钮时，它会显示所有按钮元素的所有描述值。它只需要显示与当时单击的按钮上的值（或innerHTML）一致的描述。因此，想要的描述需要在单击按钮下方显示一次。

如果有任何解决方案（可能是methods:{} 中的方法），欢迎您提供任何帮助或建议。我是 vue.js 的新手。 提前致谢。 :)

Answer 1

这是因为您使用隐藏的一个参数来控制所有元素。 您应该如下更改对象并使用 item.hidden 来处理不同的项目；

            {
            avalable: true, 
            hidden: true,
            titles: [title, id],
            author: authors,
            descriptions: [description, id]
            }

请参考这个问题：
TreeView in Vue not rendering subfolder content correctly