迁移至Vue3后使用Element Plus el-button遇ATTR_FALSE_VALUE警告求助

问题原因 #

你遇到的ATTR_FALSE_VALUE警告，是因为Vue3弃用了直接通过属性名（无值）来表示布尔true的写法。Element Plus的el-button组件的circle属性是布尔类型，你直接写circle会被Vue3解析为字符串值"circle"，不符合组件对该属性的类型要求，因此触发警告。

解决方案 #

将circle属性改为v-bind绑定布尔值的写法：:circle="true"

修改后的代码 #

<div>
  <el-button style="font-size: 30px" class="element-btn" type="primary" :circle="true" @click="buttonsController('add-button')">
    <div>
      <el-icon :size="30"><Plus /></el-icon>
      <p style="margin-top: 15px">Add</p>
      <p style="margin-top: -10px">Dates</p>
    </div>
  </el-button>
</div>

补充说明 #

在Vue3中，所有布尔类型的组件属性都需要明确通过v-bind传递布尔值（:xxx="true"或:xxx="false"），不再支持Vue2中直接写属性名表示true的简写方式，这样能避免类型不匹配导致的潜在问题。

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