translate="no" in Vue3 is not work

[EryouHao]

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. npm init vue@latest
2. write code like this:

<div translate="no">Hello Vue.js</div>
<div translate="yes">Hello Vue.js</div>

What is expected?

Expect something like this.

What is actually happening?

Actually:

[posva]

This is because translate attribute exists as dom properties but must be set as a boolean. Maybe we should handle this special case for the "no" value.

For the moment you can either set boolean values or use the ^ in front of the attribute:

<div ^translate="no">
    Hello Vue.js
  </div>
  <div :translate="false">
    Hello Vue.js
  </div>

[Rolanddoda]

@posva can you explain more about the ^ in front of the attribute trick?

[posva]

Same a .attr modifier for v-bind

[jairoblatt]

@Rolanddoda .attr - force a binding to be set as a DOM attribute.

https://vuejs.org/api/built-in-directives.html#v-bind