| (() => {})” is not evaluating as expected

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

enter image description here

(Click 0 is not working)

解决方案:

You should do this in the click listener:

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

instead of

给TA打赏
共{{data.count}}人
人已打赏
未分类

重命名非常大的CSV数据文件的列[重复]。

2022-9-9 0:33:23

未分类

linker命令失败,退出代码为1- Newrelic问题。

2022-9-9 0:44:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索