条件检查以查看在 vue 输入中使用哪种方法

Question

目前正在通过制作待办事项列表来学习vue。

我希望能够编辑待办事项，所以我添加了一个编辑按钮。编辑时输入将是文本类型，编辑的文本将被保存。

我让它们工作，但最后一部分是单击保存（与编辑相同的按钮）。我尝试使用类似

的东西

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

这实际上以某种方式禁用了按钮，当我单击按钮时，onEdit 方法甚至根本不会发生。

是我做错了还是这不可能？

提前感谢您的任何建议和意见

Answer 1

我认为您调用函数的方式不正确。我已经在下面的代码片段中完成了。你可以检查一下。我使用了相同的 class 语法。

Online IDE Link - Check this out - vue.js

希望对您有所帮助！

Answer 2

您的 class 语法有点错误。它需要一个以 classes 作为键和 true 或 false 作为值的对象

:class="{  'btn-outline-success' : editable,  'btn-outline-info' : !editable }"

条件检查以查看在 vue 输入中使用哪种方法

condition check to see which method to use in vue input

javascript

vue.js

onclicklistener

conditional-operator