今天遇到的问题,差点被自己蠢哭了。

问题背景:想要的效果本来是像下面这样。点击新增角色,title是 '新增角色名称'。点击编辑角色名,title是'编辑角色名称'。

 一开始我陷入了一个误区,下面是部分关键代码

<template>
  <a-button @clcik="showNameDialog">新增角色</a-button>
  <a-button @click="showNameDialog(true)">编辑角色</a-button>
  <a-modal :title="dialogTitle"></a-modal>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: undefined
    }
  },
  methods: {
    showNameDialog(isEdit) {
      if(isEdit) {
        // 通过传入的参数判断点击的哪个按钮
        this.dialogTitle = '编辑角色名称'
      } else {
        this.dialogTitle = '新增角色名称'
      }
    }
  }
}
</script>

这样写,乍看一下,没啥毛病啊,通过传入的变量(isEdit)来判断点击的哪个按钮。但是设置的title不管点击的是哪个按钮都是显示 '编辑角色名称',就很难受,刚开始我把原因归于这个Modal弹窗不支持动态修改title(虽然内心还是很抗拒,觉得不可能不支持啊),但是一个偶然的机会,我发现把两个click的事件名换成不同的就可以实现想要的效果了。代码如下:

<template>
  <a-button @clcik="showAddDialog">新增角色</a-button>
  <a-button @click="showEditDialog">编辑角色</a-button>
  <a-modal :title="dialogTitle"></a-modal>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: undefined
    }
  },
  methods: {
    showAddDialog() {
      this.dialogTitle = '新增角色名称'
    },
    showEditDialog() {
      this.dialogTitle = '编辑角色名称'
    }
  }
}
</script>

我慌了,看来过通过点击事件来设置这个title完全是没有问题的,那就是前面的代码哪里有问题,没办法,回过头重新定位下原因出在哪了。打debugger,发现代码根本走不到 else 的逻辑里面,这个时候我才恍然大悟,打console.log,终于发现了问题原因,那就是vue中的click事件默认自带的有一个event 原生 dom 参数,如果自己不传变量,那默认第一个变量的值就是 event对象,if 判断是通过真值判断的,对象肯定是个真值,所以这就是我最开始那样写的问题所在了。

<template>
  <!-- 这里要传入 false,不然会自带 event对象参数进去,下面的判断有问题 -->
  <a-button @clcik="showNameDialog(false)">新增角色</a-button>
  <a-button @click="showNameDialog(true)">编辑角色</a-button>
  <a-modal :title="dialogTitle"></a-modal>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: undefined
    }
  },
  methods: {
    showNameDialog(isEdit) {
      if(isEdit) {
        // 通过传入的参数判断点击的哪个按钮
        this.dialogTitle = '编辑角色名称'
      } else {
        this.dialogTitle = '新增角色名称'
      }
    }
  }
}
</script>

这样写就没有问题了,遇到这个问题主要还是自己大意了,警示警示。

Logo

前往低代码交流专区

更多推荐