2

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>
Liran Hersh
  • 41
  • 2

1 Answers1

2

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>
Leif Marcus
  • 478
  • 4
  • 6
  • I still have an error... I don't really understand what to change in the code that I post here. – Liran Hersh Jan 04 '23 at 13:51
  • I think you cannot do anything about it, as it seems to be part of the `el-button`. Do you use a library for the elements? Maybe there is a newer version of the library? – Leif Marcus Jan 04 '23 at 16:27