Dom-If 变量更改后不刷新答案

【问题标题】：Dom-If not refreshing after variable changesDom-If 变量更改后不刷新
【发布时间】：2020-09-16 03:16:57
【问题描述】：

我有这个问题，在聚合物入门工具包的页面中，我将变量设置为 true，但是在主应用程序中创建的 Dom-if 不会重新呈现，但如果我以普通方式显示变量，它改变了。

这是 dom-if 的代码：

<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
   </app-location>

   <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
   </app-route>

   <app-drawer-layout fullbleed="" narrow="{{narrow}}">
     <!-- Drawer content -->
     <template is=dom-if if='{{isLoggedIn}}'>
     <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar class="menu">Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <a class="textMenu" name="view1" href="[[rootPath]]view1">3Deseos</a>
         <a class="textMenu" name="login" href="[[rootPath]]login">Regalar</a>
         <a class="textMenu" name="view3" href="[[rootPath]]view3">Mi Perfil</a>
       </iron-selector>
       <img class="fondoDeTres" src="./images/background.png">
     </app-drawer>
     </template>

     <template is=dom-if if='{{!isLoggedIn}}'>
     <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar class="menu">Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <a class="textMenu" name="view1" href="[[rootPath]]view1">3Deseos</a>
         <a class="textMenu" name="login" href="[[rootPath]]login">Ingresar</a>
       </iron-selector>
       <img class="fondoDeTres" src="./images/background.png">
     </app-drawer>
     </template>

这是布尔值的代码（我什至尝试添加一个观察者，但它不起作用）：

   isLoggedIn: {
     type: Boolean,
     value: false,
     notify: true,
     observer: '_loginStatusChanged'
   }

这里是观察者：

   _loginStatusChanged(status){
     this.isLoggedIn=status;
     console.log("Cambio el Login a "+status);
   }

以及修改它的脚本：

  submit(){
      console.log("requestSent");
      var xhr = new XMLHttpRequest();
      var url = "http://localhost:3000/api/login";
      var request = {
        username : this.username,
        password : this.password
      }
      var that=this;
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
              var reply = JSON.parse(xhr.responseText);
              console.log(reply);
              that.set('isLoggedIn', reply);
              console.log(that.isLoggedIn);
          }
      };
      var data = JSON.stringify({request});
      xhr.send(data);
  }

有什么建议吗？提前致谢！

【问题讨论】：

更新：我刚刚检查了主应用程序中的变量，它没有改变，所以 that.set 看起来超出了范围？我总是对这些事情有问题:(
典型的聚合物。尝试将isLoggedIn 设置为null，然后设置一个新对象

标签： polymer polymer-starter-kit

【解决方案1】：

我用 Iron-localstorage 解决了这个问题。我不知道这是否是最好的方法，但它的工作原理！ :D

【讨论】：