AlpineJS x-init 被执行两次答案

【问题标题】：AlpineJS x-init being executed twiceAlpineJS x-init 被执行两次
【发布时间】：2021-03-09 10:12:07
【问题描述】：

下面是我的 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 方法被调用了两次。

我不知道为什么。请指导

谢谢施鲁蒂奈尔

【问题讨论】：

您找到解决方案了吗？
就个人而言，我不会在有条件的<template> 标签内的元素上创建x-data 和x-init 属性。我对 Alipine 不是很熟悉，但我知道 x-data（至少）在 Alpine 完成整个生命周期之前就已加载。这反过来意味着它还没有决定是否真的需要渲染<template> 中的任何东西，而这反过来很容易以不可预测的结果结束！将数据设置在更高级别的元素上并检查它是否有效！

标签： javascript alpine.js

【解决方案1】：

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

【讨论】：