javascript - 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 方法被调用了两次。

我不知道为什么。请指导

谢谢施鲁蒂奈尔

标签： javascriptalpine.js

Answer 1

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