AlpineJS x-init被执行两次

Question

下面是我的alpineJS模板html

<template id="sharing" x-if="showSharing">          
<div id="sharingContainer" x-data="preview()" x-init="getPreview()" >
<div style="padding-top:20px" x-show="showPreview">     
<div id="previewContent"></div>
</div>
</div>
</template>

下面是我的index.js

中的代码

function preview(){
var parent=this;
return{
showPreview:false,
showPicker:false,        
getPreview:function() {
console.log("inside get Preview");
var self=this;
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function(tabs){
let url =self.suggestUrl= tabs[0].url;
console.log(url);  
this.setPreviewData(url);
});

},
setPreviewData:function(data){
var self=this;          
document.getElementById('container').__x.$data.isLoading = false;
document.getElementById('sharingContainer').__x.$data.showPreview = true;

}
};
}

getPreview方法被调用两次。

我不知道为什么。请指导

谢谢舒如提Nair

Answer 1

不确定这是否是Alpine问题，但我注意到chrome.tabs正在返回undefined。当我从方法中删除这一部分时，它只运行一次。