无法点击 Vue.js 以按照我想要的方式工作

Question

各位，我是 vuejs 和 vuetify 的新手，正在尝试制作图书应用程序，但问题是所有代码都已完成，但是当我单击下拉项目时，它显示了所有图书项目，但我只想显示选定的图书项目。

这是我的HTML我被卡住的地方我在这里做错了我失败了很多次无法得到我的答案

<v-container fluid>
    <v-row aign="center">
      <v-col cols="12">
        <v-toolbar-title>State Selection</v-toolbar-title>
        <div v-on-clickaway="away" class="searchField dropdown">
          <v-text-field
            :label="labeling"
            v-model="search"
            @input="waitForSearch"
          >
          </v-text-field>
          <!-- <div class="bookParent" v-for="item in items" :key="item.id"> -->
          <!-- <img :src="item.volumeInfo.imageLinks.thumbnail" /> -->
          <div
            class="clickUpdateElement"
            v-for="(item, index) in items"
            :key="item.id"
          >
            <HelloWorld v-show="show">
              <template v-slot:contentHandler class="option" id="option1">
                <div
                  @click="clickCard(item, $event.target)"
                  class="containerForI"
                >
                  <v-img>
                    <img :src="item.volumeInfo.imageLinks.thumbnail" />
                  </v-img>

                  <a class="anchorTag">{{ item.volumeInfo.title }}</a>
                  <!-- <span>{{ item.volumeInfo.author }}</span> -->
                </div>
              </template>
            </HelloWorld>
            <div class="content">
              <Content v-show="show2" @load="updateCard(item, $event.target)">
                <template v-slot:cardContent>
                  <v-card class="mx-auto" elevation="2" outlined shaped>
                    <v-list-item three-line>
                      <v-list-item-avatar>
                        <!-- <v-img :src="imageSrc"></v-img> -->
                      </v-list-item-avatar>
                      <v-list-item-content>
                        <v-card-title>
                          {{ item.volumeInfo.title }}
                        </v-card-title>
                        <v-card-subtitle>
                          {{ index }} {{ item.volumeInfo.description }}
                        </v-card-subtitle>
                      </v-list-item-content>
                      <v-card-actions>
                        <v-btn primary>Act</v-btn>
                      </v-card-actions>
                    </v-list-item>
                  </v-card>
                </template>
              </Content>
            </div>
          </div>
        
          <v-btn @click="show2 = false">Remove</v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>

我的 JS


import axios from "axios";
import { directive as onClickaway } from "vue-clickaway";
import HelloWorld from "../components/HelloWorld";
import Content from "../components/Content";
export default {
  name: "Home",
  directives: {
    onClickaway: onClickaway,
  },
  data() {
    return {
      BASE_URL: "https://www.googleapis.com/books/v1/volumes",
      items: [],
      search: "",
      timerId: "",
      labeling: "Search For Book",
      show: false,
      show2: false,
      imageSrc: "",
      showTitle: "",
      showDescription: "",
    };
  },
  components: {
    HelloWorld,
    Content,
  },
  created() {},
  computed: {},
  //Fetch the required Information from Google Book Api

  watch: {},
  methods: {
    async getBooks() {
      this.show = true;
      let response = await axios.get(`${this.BASE_URL}`, {
        params: {
          q: this.search,
          apikey: "",
        },
      });
      this.items = response.data.items;

      console.log(this.items);
    },
    away() {
      console.log("clicked away");
      this.show = false;
    },
    
    clickCard(item, target) {
      
      console.log(item);
      console.log(target);
    
      this.show = false;
      this.show2 = true;
    },
    updateCard(item, target) {
      console.log(item);
      console.log(target);
    },
    //Method That Take and wait for the Input
    waitForSearch() {
      // this.search = "";
      clearTimeout(this.timerId);

      this.timerId = setTimeout(() => {
        this.getBooks();
      }, 1000);
    },
  },

Content.vue 我只是用了槽而已

<div class="container">
    <div class="row">
      <slot name="cardContent"></slot>
    </div>
  </div>

HelloWorld.vue

html
<div class="menu pointerCursor hide">
    <slot name="contentHandler"></slot>
  </div>

我试了很多次都失败了。请问有什么线索吗？

Answer 1

我会尝试记录要显示的索引。

那么你可以做的是：

1.Change调用ClickCard的代码

<div @click="clickCard(item, index)" class="containerForI">

2.Assign组件变量的索引值

clickCard(item, index) {
      
      console.log(item);
      this.indexToShow = index;
    
      this.show = false;
      this.show2 = true;
    },

3.Initialize 组件中的上述变量

data() {
  return {
    BASE_URL: "https://www.googleapis.com/books/v1/volumes",
    indexToShow: null,
    ...

4.Finally，检查当前选择的索引是否是要显示的索引

<Content v-show="indexToShow === null || indexToShow === index"

如果要显示所有项目，在只显示 1 项之后，您必须将 indexToShow 设置为 null。内容组件正在检查它。

无法点击 Vue.js 以按照我想要的方式工作

Cannot get click in Vue.js to work the way I'd like

vue.js

vuejs2

vuetify.js

vue-directives