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] Using object with props or data will not transpile correctly #12

Closed vip30 closed 2 years ago

vip30 commented 2 years ago

Current behavior

<template>
<div>
     <span>{{ data[msg] }}</span>
</div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Test',
  props: {
    msg: String,
  },
  data: ()=> ({
      "data": {
          "test": true,
      }
  })
});
</script>

will generate

[_c("span", [_vm._v(_vm._s(_vm.data[msg]))])]

Expected behavior

[_c("span", [_vm._v(_vm._s(_vm.data[_vm.msg]))])]

Extra

Hence vue throws an error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "ReferenceError: msg is not defined"

found in

---> <Test> at src/components/Test.vue
         <App> at src/App.vue
           <Root>

14-09-2021 Updated: Seems not related to slot

JuniorTour commented 2 years ago

A Bug. Welcome for Pull Request too!


Seems to be relate to the core logic:

https://github.com/JuniorTour/vue-template-babel-compiler/blob/96bb88929e9c13cc8d408c5045bb1d984d869f2a/src/plugins/utils/shouldPrependVM.js

We may need take data[msg] into consideration.

Add some judge condition to shouldPrependVmNew,

https://github.com/JuniorTour/vue-template-babel-compiler/blob/96bb88929e9c13cc8d408c5045bb1d984d869f2a/src/plugins/utils/shouldPrependVM.js#L30-L53

So that the msg will prepend with _vm.

vip30 commented 2 years ago

A Bug. Welcome for Pull Request too!

Seems to be relate to the core logic: https://github.com/JuniorTour/vue-template-babel-compiler/blob/96bb88929e9c13cc8d408c5045bb1d984d869f2a/src/plugins/utils/shouldPrependVM.js

We may need take data[msg] into consideration.

Add some judge condition to shouldPrependVmNew,

https://github.com/JuniorTour/vue-template-babel-compiler/blob/96bb88929e9c13cc8d408c5045bb1d984d869f2a/src/plugins/utils/shouldPrependVM.js#L30-L53

So that the msg will prepend with _vm.

Please review the mr https://github.com/JuniorTour/vue-template-babel-compiler/pull/15