condition check to see which method to use in vue input

Question

Currently learning vue by making a todo list.

I wanted to be able to edit the todo items, so I added a button for edit. and upon edit the input will be a text type and edit's text will be save.

I got them working but final part where save (same button as edit) is clicked. I tried using something like

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

This actually disabled the button somehow that when I click the button the onEdit method does not even happen at all.

Am I doing it wrong or this is just not possible?

Thanks in advance for any suggestions and advices

Answer 1

I think you're not calling the function in a correct way. I have done it in the code snippet below. You can check it out. I've used the same class syntax.

Online IDE Link - Check this out - vue.js

Hope It helps!