querySelector() 只找到两个项目然后失败

Question

我正在使用 salesForce 和 lwc 编写一个非常简单的网站。我想获得对 google 本书 API 的 https 请求，然后将结果显示到列表中。

当我想为书籍加载图像时，我使用 querySelector() 通过数据 ID 查找我的标签（我根据请求的书籍 ID 设置数据 ID）。我使用一个函数通过Ids迭代然后设置图像（我也尝试通过这种方式设置图像：<img src={Book.id}>但是它不起作用。

searchList.html

<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>

searchList.js:

import { LightningElement, track } from 'lwc';
export default class BooksSearch extends LightningElement {
    
    @track Books;
    searchTitleValue = '';
    searchAuthorValue = '';

    async findBooks()
    {
        if(this.searchTitleValue !== '')
        {
            let tempTitle = this.searchTitleValue.replace(/ /g, '_');
            let tempAuthor = '';
            if(this.searchAuthorValue !== '')
            {
                let tempList = this.searchAuthorValue.split(' ');
                tempAuthor = '+inauthor:' + tempList[tempList.length - 1];
            }
            let url = 'https://www.googleapis.com/books/v1/volumes?q=' + tempTitle + tempAuthor +'&maxResults=40&key=[my key]'
            let fetchResult = await fetch(url);
            let jsonString = await fetchResult.json();
            this.Books = jsonString.items;
            console.log(jsonString);
        }
        setTimeout(() => {
            let size = this.Books.length;
            for(let i = 0; i < size; i++)
            {
                let bookImage = this.Books[i].volumeInfo.imageLinks.smallThumbnail;
                let bookId = this.Books[i].id;
                console.log('Current (' + i + ') book id: ' + bookId);
                let element = this.template.querySelector('[data-id=' + bookId + ']');
                console.log('Element by id: ' + element);
                element.setAttribute("src", bookImage);
            }
        } , 1000);
    }

    updateSearchTitleValue(event)
    {
        this.searchTitleValue = event.target.value;
    }

    updateSearchAuthorValue(event)
    {
        this.searchAuthorValue = event.target.value;
    }
}

所以，当我加载书籍时，只加载了两本书并且脚本不起作用，但是来自 .js 和来自 html 的数据 ID 重合：

另外，当我寻找另一本书时，它会加载不同数量的图像，有时会加载所有图像。

我需要做什么才能通过此数据 ID 获取此元素。

Answer 1

我对 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 + "]")

Answer 2

我发现了问题。我忘了在 querySelector 中粘贴 "" ，所以正确的代码是这样的：

let element = this.template.querySelector('[data-id="' + bookId + '"]');

querySelector() 只找到两个项目然后失败

querySelector() find only two items and then fail

javascript

jquery-selectors