0

I came across this example in Vue Quasar Framework, where is an object literal in parameters in function declaration:

import { ref } from vue
  export default {
  setup () {
    const info = ref(null)
    return {
      info,
      handleSwipe ({ evt, ...newInfo }) { //---this line----
        info.value = newInfo
        // native Javascript event
      }
    }
  }
}

Is this some kind of webpack speciality, or what does it mean? I've tried to put it in chrome console without success.

Catch
  • 330
  • 4
  • 11
  • 3
    See also https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment specifically towards the bottom where it talks about functions – Jamiec Jun 21 '21 at 12:48
  • @Jamiec - I don't think that's destructuring assignment at work there – Jaromanda X Jun 21 '21 at 12:49
  • Three dots operator is familiar to me, i mean the whole object literal `{ evt, ...newInfo }` in the parameter section of the function constructor, what does it mean? It is some kind of default value? – Catch Jun 21 '21 at 12:49
  • 1
    @JaromandaX it's the same thing - the page I linked see `Unpacking fields from objects passed as a function parameter` (Unless I'm missing something which is entirely possible) – Jamiec Jun 21 '21 at 12:50
  • 1
    Oh, yeah, sorry, you're correct, I'm wrong @Jamiec - it's not spread syntax at all!!! I read that as calling a function rather than declaring a function :p – Jaromanda X Jun 21 '21 at 12:52
  • It's *function argument object destructuring with __rest__ arguments.* – deceze Jun 21 '21 at 12:56
  • `fn({ evt, ...newInfo }) { info.value = newInfo; }` would be (simplistically) equivalent to `fn(o) { let evt = o.evt, newInfo = o; delete newInfo.evt; info.value = newInfo; }` – Jaromanda X Jun 21 '21 at 12:58

0 Answers0