Javascript LWC从@wire对DIV执行查询选择器
我有一个LWC作为全球行动中的快速行动。 执行一个wire方法,在数据块中执行另一个方法,该方法在div上执行querySelector。 第一次打开快速操作LWC时,querySelector成功执行。 当我关闭快速操作窗口并再次打开它时,querySelector为空。 只有在刷新之后,才会再次成功执行querySelectorJavascript LWC从@wire对DIV执行查询选择器,javascript,salesforce,lwc,Javascript,Salesforce,Lwc,我有一个LWC作为全球行动中的快速行动。 执行一个wire方法,在数据块中执行另一个方法,该方法在div上执行querySelector。 第一次打开快速操作LWC时,querySelector成功执行。 当我关闭快速操作窗口并再次打开它时,querySelector为空。 只有在刷新之后,才会再次成功执行querySelector <div data-parent-id="parent-div-id" class={parentClass} style={parent
<div data-parent-id="parent-div-id" class={parentClass} style={parentStyle}>
@wire(isUser)
wiredIsUser({data, error}) {
if (data) {
this.isUser = data;
this.setCssClass();
} else if (error) {
console.log('Error wire:', error.body.message);
}
}
setCssClass() {
let element = this.template.querySelector('[data-parent-id="parent-div-id"]');
console.log('element:', element); // not null the first time, but null the second time
if (element && this.isUser) {
let height = element.getBoundingClientRect().height;
let width = element.getBoundingClientRect().width;
this.parentClass = 'slds-p-around_large slds-scrollable_y';
this.parentStyle = 'height:' + height + 'px; width:' + width + 'px;';
}
}
@连线(isUser)
无线用户({data,error}){
如果(数据){
this.isUser=数据;
这个.setcsclass();
}else if(错误){
log('Error wire:',Error.body.message);
}
}
setCssClass(){
let element=this.template.querySelector(“[data parent id=“parent div id”]”);
console.log('element:',element);//第一次不为null,第二次为null
if(元素&&this.isUser){
设height=element.getBoundingClientRect().height;
让width=element.getBoundingClientRect().width;
this.parentClass='slds-p-around_large slds-scrollable_y';
this.parentStyle='height:'+height+'px;width:'+width+'px;';
}
}
第一次打开组件时,将从服务器中提取数据,在此期间,组件已呈现,并调用setcsclass(),因此querySelector工作正常。因为方法是有线的,所以响应被缓存在浏览器上
下次打开组件时,将从缓存中提取数据,这会很快/在组件渲染之前发生,因此querySelector不会返回任何内容
在这种情况下,您可能需要更改方法