[Vue warn]: (deprecation ATTR_FALSE_VALUE)

Question

I migrate to Vue3 and I got this Vue warn, I don't really understand how to solve it. That happend when I use el-button of element-plus library.

enter image description here

The code:

<div>
                <el-button
                  style="font-size: 30px"
                  class="element-btn"
                  type="primary"
                  circle
                  @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>

Answer 1

There is a breaking change in Vue 3 that is mentioned in the migration guide (point 2 in the overview).

BREAKING: No longer removes attribute if the value is boolean false. Instead, it's set as attr="false". To remove the attribute, use null or undefined.

If you want to get rid of the warning, you should set the attribute value to null or undefined instead of false. Otherwise vue will apply the attribute with false instead of removing it.

Example

<!-- 
  if your variable contains `true` or `false`
  you need to make sure, the false case is
  passed as `null` or `undefined` to the attribute binding.
-->
<div :aria-disabled="myVariable || null"></div>