condition check to see which method to use in vue input

user_1850712 0
Viewed 60

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

onclicklistener vue.js conditional-operator javascript
2 Answers

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!

user_91388500

Your class syntax is a bit wrong. It expects an object with classes as key and true or false as value

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