无法在 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);
},
},

内容。我只使用了slot

<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。更改调用ClickCard

的代码

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

2。将index的值赋给组件变量

clickCard(item, index) {

console.log(item);
this.indexToShow = index;

this.show = false;
this.show2 = true;
},

3。在组件

中初始化上述变量

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

4。最后，检查当前选择的索引是否为显示

的索引

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

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