Vue.js点击事件不符合预期 点击Vuetify下拉项仅展示选中书籍求助

你当前使用全局的show2变量控制所有图书条目的显隐，所有遍历生成的Content组件共用这一个布尔值，所以一旦show2设为true，所有图书的详情卡片都会同时展示。

步骤1：修改数据定义 #

替换原来的show2变量，新增selectedBookId用来存储当前选中的图书ID：

// data 部分修改
data() {
  return {
    BASE_URL: "https://www.googleapis.com/books/v1/volumes",
    items: [],
    search: "",
    timerId: "",
    labeling: "Search For Book",
    show: false,
    // 删掉原来的show2: false
    selectedBookId: null, // 新增：存储选中的图书id
    imageSrc: "",
    showTitle: "",
    showDescription: "",
  };
},

步骤2：修改点击选中逻辑 #

点击某本图书时，只把当前图书的ID存到selectedBookId里：

// clickCard方法修改
clickCard(item, target) {
  console.log(item);
  console.log(target);
  this.show = false;
  this.selectedBookId = item.id; // 替换原来的this.show2 = true
},

步骤3：修改详情卡片的显隐判断 #

只有当前遍历的图书ID等于选中的ID时，才展示详情卡片：

<!-- 原来的Content标签修改v-show条件 -->
<Content v-show="item.id === selectedBookId" @load="updateCard(item, $event.target)">
  <!-- 原有插槽内容保持不变 -->
</Content>

步骤4：修改移除按钮逻辑 #

点击移除时清空选中的ID即可隐藏卡片：

<v-btn @click="selectedBookId = null">Remove</v-btn>

修改完成后，点击下拉选项里的某本图书，只会展示对应选中的那本的详情卡片。

内容的提问来源于stack exchange，提问作者jatin sharma