Vue @click="item.click || (() => {})" is not evaluating as expected

Question

I'm v-for some buttons from some data, these data contain callback that I want to bind to <button />.

I know some of those data have no callback, so I wrote this

<button @click="item.click || (() => {})"></button>

However, this line is not working as I expected, now, all my buttons' click event is not doing things anymore.

Please see this minimum example

<template>
  <div>
    <div v-for="(item, itemIndex) in data" :key="itemIndex">
      <button @click="item.click || (() => {})">Click {{ itemIndex }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          click: () => {
            alert("First Item");
          },
        },
        {
          // Empty Object
        },
      ],
    };
  },
};
</script>

What should I do to prevent empty callbacks?

Here is my CodeSandbox

(Click 0 is not working)

Majed Badawi · Accepted Answer · 2020-04-24 10:48:25Z

2

You should do this in the click listener:

@click="item.click ? item.click() : (() => {})"

instead of

@click="item.click || (() => {})"

edited Apr 24, 2020 at 10:48

answered Apr 24, 2020 at 10:42

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph Over a year ago

codesandbox.io/s/…

Justinas Over a year ago

Doesn't item.click() tries to execute click function instead of just passing function reference to @click?

Majed Badawi Over a year ago

@JosephWang you are welcome, please mark the answer as the solution if it solved your problem.

Collectives™ on Stack Overflow

Vue @click="item.click || (() => {})" is not evaluating as expected

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related