2

In one of the guides for Vue framework I've seen the following passage.

<template>
  <div id="blopp">
    <ul>
      <li @click="doStuff">Stuff</li>
      <li @click="doThings">Things</li>
    </ul>
  </div>
</template>

I'd like to know what that means and how it affects the build. Googling gave nothing because google disregards special characters and common words when searching so all I got was a bunch of references to jQuery's API and some hits on W3Schools.

I have a hunch that it's got to do with WebPack transformations but it could be specific to Vue too.

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438

1 Answers1

3

It's nothing to do with Webpack - it's part of Vue's binding syntax. @ is used as a shortcut syntax for v-on:, which is used for binding functions/statements to events.

So in your example, the click event on the first li is bound to the doStuff function, and the click event on the second li is bound to the doThings function.

tony19
  • 125,647
  • 18
  • 229
  • 307
Joe Clay
  • 33,401
  • 4
  • 85
  • 85
  • @KonradViltersten: Exactly :) – Joe Clay Nov 30 '16 at 13:57
  • Well, as long as we're on the subject of syntax in Vue - I can't figure out how to deploy the "..." operator for *mapActions* and my clickaroos aren't working proeprly. Should I ask a new question or is it something super simple too? ([Here's the suggestion](http://stackoverflow.com/a/40878876/1525840) that I try to implement.) – Konrad Viltersten Nov 30 '16 at 13:59
  • @KonradViltersten: Are you using Babel? The [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread) syntax is currently only a proposal rather than a confirmed part of the JavaScript spec, so you need an extra Babel plugin to use it. That plugin can be found here, with installation instructions: https://babeljs.io/docs/plugins/transform-object-rest-spread/ – Joe Clay Nov 30 '16 at 14:08
  • @KonradViltersten: Or alternatively, you can just go without using `mapActions` like so: `methods: { updateData: () => this.$store.dispatch("updateData"), resetData: () => this.$store.dispatch("resetData") }`. The resulting object is the same, `mapActions` just makes it looks a little prettier. – Joe Clay Nov 30 '16 at 14:14
  • Awesome, this (uglier, old style) version you suggested worked out. Still not sure why it didn't like the spread-operator (that's what the dot-dot-dot is called, right?) but at least it's not complaining about that. Would you have time to [take a look there](http://stackoverflow.com/q/40877970/1525840) if I entered it correctly? Since the original error is still there, I'm afraid that I've done something else in a wrong way. – Konrad Viltersten Nov 30 '16 at 14:34
  • @KonradViltersten: Commented on the answer to that question :) – Joe Clay Nov 30 '16 at 14:50