如何解决querySelector() 只找到两个项目然后失败
我正在使用 salesForce 和 lwc 编写一个非常简单的网站。我想获得对谷歌图书 API 的 https 请求,然后将结果显示到列表中。
当我想加载书籍图像时,我使用 querySelector() 通过数据 ID 查找我的标签(我从请求的书籍 ID 设置数据 ID)。我使用一个函数来迭代 Id,然后设置图像(我也尝试通过这种方式设置图像:apt install python3-dev
但它不起作用。
searchList.html
<img src={Book.id}>
searchList.js:
<template>
<lightning-card>
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<span class="slds-text-heading_small slds-truncate slds-align_absolute-center">Books</span>
</h2>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">
<div class="slds-m-bottom_x-small slds-wrap slds-grid slds-gutters">
<lightning-input type="text"
value={searchTitleValue}
label="Book title"
onchange={updateSearchTitleValue}
class="slds-col"
></lightning-input>
<lightning-input type="text"
value={searchAuthorValue}
label="Author"
onchange={updateSearchAuthorValue}
class="slds-col"
></lightning-input>
</div>
<button class="slds-button slds-button_brand slds-button_stretch" onclick={findBooks}>Find Book(s)</button>
<lightning-layout class="slds-p-around_xx-small slds-grid slds-grid_pull-padded slds-wrap slds-Box slds-grid_align-center">
<template for:each={Books} for:item='Book'>
<lightning-layout-item class="slds-m-around_xx-small slds-size_4-of-12 slds-Box" key={Book.id}>
<h2 class="slds-text-align_center"><b>{Book.volumeInfo.title}</b></h2>
<p class="slds-p-horizontal_small">Author: {Book.volumeInfo.authors}</p>
<img data-id={Book.id} src="">
</lightning-layout-item>
</template>
</lightning-layout>
</div>
</article>
</lightning-card>
</template>
所以,当我加载书籍时,只有两本书加载并且脚本不起作用,但是来自 .js 和来自 html 的 data-id 一致:
此外,当我寻找另一本书时,它会加载不同数量的图像,有时会加载所有图像。
解决方法
我发现了问题。
我忘记将 ""
粘贴到 querySelector
中,所以正确的代码如下所示:
let element = this.template.querySelector('[data-id="' + bookId + '"]');
我对 lwc 了解不多,但做了一些研究,我看到 querySelector 被这样使用:
this.template.querySelector("lightning-input[data-my-id=in3]")
对于:<lightning-input data-my-id="in3" class="second-class">
所以也许试试:this.template.querySelector("img[data-id=" + bookId + "]")
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。