你的按钮写法本身是可行的，但出现点击无响应甚至onEdit都触发不了的情况，大概率是其他细节没处理到位，我帮你梳理几个排查方向和解决方案：

1. 确保editable是响应式状态 #

Vue只有在data中声明的属性才是响应式的，如果你的editable没放在组件的data选项里，状态变化不会被Vue追踪，按钮的文本、样式和点击事件都不会正确切换。

正确的声明方式：

<script>
export default {
  data() {
    return {
      editable: false, // 初始设为false，默认显示edit按钮
      todoText: '待办内容' // 示例待办文本
    }
  },
  methods: {
    onEdit() {
      this.editable = true;
      console.log('进入编辑模式');
    },
    onSave() {
      this.editable = false;
      console.log('保存编辑内容');
      // 这里可以添加保存逻辑，比如更新Todo列表
    }
  }
}
</script>

2. 检查方法定义是否正确 #

确认onEdit和onSave确实写在组件的methods对象里，没有拼写错误（比如把onEdit写成onEdite）。如果方法不存在，点击按钮自然不会有任何响应。

3. 排查@click.prevent的影响 #

虽然.prevent修饰符是用来阻止默认行为的，但如果你的按钮嵌套在<form>标签里，有时候可能会和表单的默认提交行为冲突。你可以先尝试去掉.prevent，看看按钮是否能正常触发事件：

<button 
  class="btn btn-sm" 
  :class="editable ? 'btn-outline-success' : 'btn-outline-info'" 
  @click="editable ? onSave : onEdit"
>{{ editable ? 'save' : 'edit' }}</button>

如果去掉后正常了，再考虑是否真的需要阻止默认行为，或者调整表单的处理逻辑。

4. 更清晰的写法建议 #

模板里的三元表达式虽然简洁，但如果逻辑变复杂，可读性会下降。你可以把点击事件统一绑定到一个方法里，在方法内部判断状态：

<template>
  <button 
    class="btn btn-sm" 
    :class="editable ? 'btn-outline-success' : 'btn-outline-info'" 
    @click="handleButtonClick"
  >{{ editable ? 'save' : 'edit' }}</button>
</template>

<script>
export default {
  data() {
    return {
      editable: false,
      todoText: '待办内容'
    }
  },
  methods: {
    handleButtonClick() {
      this.editable ? this.onSave() : this.onEdit();
    },
    onEdit() {
      this.editable = true;
      // 编辑逻辑，比如让输入框切换为可编辑状态
    },
    onSave() {
      this.editable = false;
      // 保存逻辑，比如更新后端数据或本地列表
    }
  }
}
</script>

这种写法更直观，也更容易调试，后续扩展功能也更方便。

你可以先按照上面的步骤排查，特别是editable的响应式声明，这是最容易忽略的点。如果还是有问题，可以把组件的完整代码贴出来，我再帮你进一步分析。

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