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)，并且单击它会使其变为 false。参考下面的代码。

工作示例是here

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>