search

JuniorTour / vue-template-babel-compiler

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://www.npmjs.com/package/vue-template-babel-compiler
118 stars 9 forks source link

[Bug] Computed property names not working in template #28

Closed mahammad-sixberries closed 2 years ago

mahammad-sixberries commented 2 years ago

Current behavior

:class="{
    [class1]: condition1,
    [class2]: condition2,
}"

Expected behavior

Computed property names should be working as per this

JuniorTour commented 2 years ago

Thanks for you feedback.

It is a Bug.

It has something to do with @babel/plugin-transform-computed-properties && assumptions.setComputedProperties

We may need prepend _vm. to computed class property too:

https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/src/plugins/utils/shouldPrependVM.js#L21-L35

May be we need:

// not a key of Property || is a computed key of Property
  && ((types.isObjectProperty(parent) && parent.key === node) ? parent.computed : true)

If anyone has interest to fix this issue, follow the CONTRIBUTING.md will help you.

JuniorTour commented 2 years ago

I have fixed this issue. You can try it by run: npm install vue-template-babel-compiler@latest

Thanks for your feedback again!