Vue.js中Vuetify按钮@click绑定多操作报错，求正确写法及多函数绑定

嘿，这个问题我之前开发Vue项目时也踩过坑！Vue不允许在同一个元素上重复绑定相同的指令（比如你写了两次@click.stop），所以才会抛出duplicate attribute: @click.stop的错误。下面给你几种正确的写法，同时解答你关于绑定多个函数的疑问：

方法一：在@click中直接写多个表达式（分号分隔） #

如果只是简单的状态赋值，直接在指令里用分号分隔多个操作就行，不用拆成两个@click：

<v-btn flat color="indigo darken-3" @click.stop="dialogDelete = true; deleteTemporaryId = offer.id">Delete</v-btn>

这种方式适合逻辑简单的场景，快速直观。

方法二：封装成单个方法（推荐） #

如果后续可能要添加更多删除相关的逻辑（比如调用后端接口、添加加载状态等），更推荐把这些操作封装成一个方法，代码更易维护：

首先修改模板：

<v-btn flat color="indigo darken-3" @click.stop="handleDelete(offer.id)">Delete</v-btn>

然后在组件的methods中定义这个方法：

export default {
  data() {
    return {
      dialogDelete: false,
      deleteTemporaryId: null
    }
  },
  methods: {
    handleDelete(id) {
      // 执行多个操作
      this.dialogDelete = true;
      this.deleteTemporaryId = id;
      
      // 后续可以添加更多逻辑，比如调用删除接口
      // this.$axios.delete(`/offers/${id}`).then(...)
    }
  }
}

这种方式把所有删除相关的逻辑聚合在一起，可读性和可扩展性都更强。

关于@click绑定多个函数的问题 #

当然可以！除了上面的方式，你也可以直接在@click中调用多个函数，用分号分隔即可：

<v-btn @click.stop="openDeleteDialog(); setDeleteId(offer.id)">Delete</v-btn>

前提是你已经在methods中定义了openDeleteDialog和setDeleteId这两个函数。不过还是建议尽量把相关逻辑封装成单个方法，避免模板里的代码过于杂乱。

内容的提问来源于stack exchange，提问作者gileneusz