Rails escapes Vue syntax

[hiromichinomata]

Steps to reproduce

123f42a changed the behavior of Rails.
As far as I checked code, @ in not included in COMMON_DANGEROUS_CHARS.
Is this expected behavior?

in haml file

= select_tag :some_field_1, raw("<option>Read</option><option>Write</option>"), class: 'some-class', '@change': 'someFunc()', 'v-model': 'someModel'
= select_tag :some_field_2, raw("<option>Read</option><option>Write</option>"), class: 'some-class', '@change': 'someFunc()', 'v-model': 'someModel', escape: true
= select_tag :some_field_3, raw("<option>Read</option><option>Write</option>"), class: 'some-class', '@change': 'someFunc()', 'v-model': 'someModel', escape: false
= select_tag :some_field_4, raw("<option>Read</option><option>Write</option>"), class: 'some-class', 'v-on:change': 'someFunc()', 'v-model': 'someModel'
= select_tag :some_field_5, raw("<option>Read</option><option>Write</option>"), class: 'some-class', 'v-on:change': 'someFunc()', 'v-model': 'someModel', escape: true
= select_tag :some_field_6, raw("<option>Read</option><option>Write</option>"), class: 'some-class', 'v-on:change': 'someFunc()', 'v-model': 'someModel', escape: false

Expected behavior

In 6.1.5, @change still appears in generated HTML

<select name="some_field_1" id="some_field_1" class="some-class" @change="someFunc()" v-model="someModel"><option>Read</option><option>Write</option></select>
<select name="some_field_2" id="some_field_2" class="some-class" @change="someFunc()" v-model="someModel" escape="true"><option>Read</option><option>Write</option></select>
<select name="some_field_3" id="some_field_3" class="some-class" @change="someFunc()" v-model="someModel" escape="false"><option>Read</option><option>Write</option></select>
<select name="some_field_4" id="some_field_4" class="some-class" v-on:change="someFunc()" v-model="someModel"><option>Read</option><option>Write</option></select>
<select name="some_field_5" id="some_field_5" class="some-class" v-on:change="someFunc()" v-model="someModel" escape="true"><option>Read</option><option>Write</option></select>
<select name="some_field_6" id="some_field_6" class="some-class" v-on:change="someFunc()" v-model="someModel" escape="false"><option>Read</option><option>Write</option></select>

Actual behavior

In 6.1.5.1, @change is escaped

<select name="some_field_1" id="some_field_1" class="some-class" _change="someFunc()" v-model="someModel"><option>Read</option><option>Write</option></select>
<select name="some_field_2" id="some_field_2" class="some-class" _change="someFunc()" v-model="someModel" escape="true"><option>Read</option><option>Write</option></select>
<select name="some_field_3" id="some_field_3" class="some-class" _change="someFunc()" v-model="someModel" escape="false"><option>Read</option><option>Write</option></select>
<select name="some_field_4" id="some_field_4" class="some-class" v-on:change="someFunc()" v-model="someModel"><option>Read</option><option>Write</option></select>
<select name="some_field_5" id="some_field_5" class="some-class" v-on:change="someFunc()" v-model="someModel" escape="true"><option>Read</option><option>Write</option></select>
<select name="some_field_6" id="some_field_6" class="some-class" v-on:change="someFunc()" v-model="someModel" escape="false"><option>Read</option><option>Write</option></select>

System configuration

Rails version:
6.1.5.1

Ruby version:
2.7.5

[ashkulz]

@hiromichinomata we also faced the same regression, we switched to the v-on: syntax everywhere 🤷‍♂️

[pomartel]

Same problem with Haml and Vue.js since we upgraded from Rails 7.0.2.3 to 7.0.2.4. @ are converted to _ but only in Prod.

[mberube]

Very similar issue with angular property binding syntax "[key] => 'value'" (rails 6.0.4.8)

In my particular case all the keys and values were fully under my control so I can escape: false... But ideally I don't want to have to escape both keys and values at the same time since I might own the keys, not the values...

To my knowledge there is no equivalent syntax without brackets (like v-on in Vuejs) so I might have a big issue if I don't own the values

quick edit: it seems that bind-key works, so I can use that

[eileencodes]

I fixed this in #45027 and backported it to all the versions of Rails. I'll do a release tomorrow or early next week.

[hiromichinomata]

Thank you very much!

[ashkulz]

Thanks a lot, @eileencodes!

[eileencodes]

Closing as the release went out this morning. Hope that fixes the issue for you!

[rylanb]

Note for anyone following along behind me:
https://vuejs.org/guide/components/slots.html#named-slots

v-slot:default can be short-handed to #default. I'm seeing that render out as _default instead of #default in this 6.0.5 update.