1

I would like to use a spread operator in a destructured v-for loop in Vue.js 2 working with vue-template-babel-compiler. I need the latter in the first place to compile the optional chaining operator in templates. But then I noticed, after using that compiler, that the following example stopped working:

<div
  v-for="{a, b, ...others} in [{a:1, b:2, c:3, d:3}, {a:4, b:5, e:6, f:7}]"
  :key="a"
>
  <div>
    a: {{ a }}
    b: {{ b }}
    others: {{ others }}
  </div>
</div>

As I get this error message: ReferenceError: _objectWithoutProperties is not defined.

I tried installing vue-template-babel-compiler v1.2.0 and v2.0.0 with the plugins (among others): plugin-proposal-object-rest-spread, plugin-transform-spread and plugin-transform-destructuring.

Am I missing something? Is there a better alternative in VueJs 2 to be able to compile these operators in templates (optional chaining, spread, destructuring, etc.) without all the babel-compiler thing?

rubebop
  • 392
  • 1
  • 7
  • 17
  • 1
    The given code works perfectly (just tried). The issue is coming from somewhere else. – kissu Oct 20 '22 at 16:25
  • You are right. The issue appears when using `vue-template-babel-compiler` and ist not intrinsic to VueJs 2. I updated/edited the question. Thanks. – rubebop Oct 24 '22 at 09:20
  • 1
    I know that you can configure the optional chaining into templates (don't have a direct link right now) but it's doable. Still, I used to simply do that into the `script` part by using a `computed` tho (recommended way anyway, since the good practice is to reduce the amount of work down on the front-end side of things). Vite also allows that one out of the box. – kissu Oct 24 '22 at 09:26
  • Give a try to that one: https://stackoverflow.com/a/68609994/8816585 – kissu Oct 24 '22 at 09:29
  • Yes, the optional chaining worked, but then the destructuring and / or spread operator didn't work anymore. As you said, computed properties always worked, so I guess I'm going to go that path, specially considering your comment "recommended way anyway, since the good practice is to reduce the amount of work down on the front-end side of things". – rubebop Oct 24 '22 at 09:31
  • Pretty sure there is a way of adding an existing configuration to Webpack without breaking what's already in place. The destructuring works out of the box so it seems quite strange that this one would be broken. – kissu Oct 24 '22 at 09:32
  • 'Give a try to that one: stackoverflow.com/a/68609994/8816585' -> That's precisely what I tried. – rubebop Oct 24 '22 at 09:36

0 Answers0