I'm using arrow functions to run multiple events on @click like below:

<btn @click="()=> {variable = "5"; 
myFunction(variable); 
myFunction2('something'); 
$emit('argument', myFunction3())}"
>Run functions!</btn>

I want to know if this is secure/good practice?

If not, why? Can I ask for any arguments?

I'm using arrow functions to run multiple events on @click like below:

<btn @click="()=> {variable = "5"; 
myFunction(variable); 
myFunction2('something'); 
$emit('argument', myFunction3())}"
>Run functions!</btn>

I want to know if this is secure/good practice?

If not, why? Can I ask for any arguments?

• javascript
• vue.js

Share Improve this question Follow asked Apr 5, 2018 at 20:57 gileneuszgileneusz 1,49599 gold badges3636 silver badges5555 bronze badges 5

• 1 Why not break the function out like @click="buttonClick"? – sliptype Commented Apr 5, 2018 at 20:59
• @sklingler93 I know that I can do it, but arrow functions seems more convenient for me on development stage – gileneusz Commented Apr 5, 2018 at 21:00
• 1 I agree with sklingler93. You should keep the HTML as clean as possible (meaning minimum logic only). One of the most important practices is the separation of concerns. – molerat Commented Apr 5, 2018 at 21:00
• @molerat I agree with you both, but my question is rather - will something wrong happen if I will use arrow functions? – gileneusz Commented Apr 5, 2018 at 21:02
• I have never done that, sorry – molerat Commented Apr 5, 2018 at 21:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

tl;dr In general, arrow functions work in event handlers (doesn't mean that you should use them, see below).

---

But, first, your example code int the question wouldn't work:

new Vue({
  el: '#app',
  methods: {
  	myFunction() {},
    myFunction2() {},
    myFunction3() {},
  }
})

<script src="https://unpkg./vue"></script>
<script src="https://unpkg./vuex"></script>

<div id="app">
  <p>
  
  <button @click="()=> {variable = "5"; myFunction(variable);  myFunction2('something');  $emit('argument', myFunction3())}"
  >Run functions!</button>
  
  </p>
</div>

As you can see, the problem is the " in "5" closes the attribute.

---

Second: If you fix the " (see below) the code doesn't work the way you think seem to think it does. When using variable that way:

@click="()=> {variable = "5"; myFunction(variable);  myFunction2('something');  $emit('argument', myFunction3())}"

it is not a local variable to that scope. It is expected to be a property in the ponent (e.g. a data or puted property).

To use locally, you would have to properly declare it, using var, let or const:

new Vue({
  el: '#app',
  data: {},
  methods: {
  	myFunction(a) { console.log("myFunction", a) },
    myFunction2(a) { console.log("myFunction2", a) },
    myFunction3() { console.log("myFunction3") },
  }
})

<script src="https://unpkg./vue"></script>
<script src="https://unpkg./vuex"></script>

<div id="app">
  <p>
  
  <button @click="()=> {let variable = '5'; myFunction(variable);  myFunction2('something');  $emit('argument', myFunction3())}"
  >Run functions!</button>
  
  </p>
</div>

Final and most important point. That practice leads to code that is way harder to maintain.

It's an unnecessary way of having logic in the template. The standard way of doing this is simply creating a method and calling it from the template.

Demo:

new Vue({
  el: '#app',
  data: {},
  methods: {
    myMethod() {
      let variable = '5';
      this.myFunction(variable);
      this.myFunction2('something');
      this.$emit('argument', myFunction3())
    },
  	myFunction(a) { console.log("myFunction", a) },
    myFunction2(a) { console.log("myFunction2", a) },
    myFunction3() { console.log("myFunction3") },
  }
})

<script src="https://unpkg./vue"></script>
<script src="https://unpkg./vuex"></script>

<div id="app">
  <p>
  
  <button @click="myMethod">Run functions!</button>
  
  </p>
</div>