Polymer 3点击按钮切换Div显隐时showNotification值为undefined求助

我看到你代码里的两个关键问题导致了这个异常，咱们一步步来修复：

1. 属性定义不符合Polymer规范 #

在Polymer 3中，组件属性的定义需要明确通过type字段指定类型，你当前的写法showNotification: Boolean是不正确的。正确的属性定义应该是：

static get properties() {
  return {
    showNotification: {
      type: Boolean,
      value: false // 可以直接在这里设置默认值，无需在connectedCallback中重复赋值
    }
  };
}

原来的写法没有正确初始化属性类型，会导致Polymer无法识别这个属性，进而出现undefined的情况。另外直接在属性定义里用value设置默认值，更符合Polymer的最佳实践。

2. 点击方法未正确赋值属性 #

你的_showHideNotification方法里只写了this.showNotification != this.showNotification;，这只是一个比较表达式，并没有将结果赋值给属性本身，所以属性值完全没有变化。正确的写法应该是：

_showHideNotification() {
  this.showNotification = !this.showNotification; // 必须将取反结果赋值给属性
  console.log(this.showNotification);
}

这样每次点击按钮时，属性值才会在true和false之间切换，控制台也能打印出正确的布尔值。

完整修复后的代码片段 #

static get properties() {
  return {
    showNotification: {
      type: Boolean,
      value: false
    }
  };
}

// 这里可以移除connectedCallback中的赋值代码，因为属性已通过value设置默认值

_showHideNotification() {
  this.showNotification = !this.showNotification;
  console.log(this.showNotification);
}

<div class='notification-count' on-click='_showHideNotification'>
  <div>4</div>
</div>
<div class="cards" hidden$='[[showNotification]]'></div>

修改完成后，点击按钮就能正常显示和隐藏.cards元素，控制台也会正确输出showNotification的布尔值了。

内容的提问来源于stack exchange，提问作者user8497224