[Vuejs]-How can a Vue component behaves differently in different states?

Simple solution:
have a property in your data called editMode, and check it in your click handler:
i.e:

<button @click="editMode?selectNode:deleteNode">Click Me</button>

where selectNode & deleteNode are methods in your component..

Ah, I solved the same requirement ago.

You could pass a parameter to your event function, and it decides how a behavior your event function has.

<button @click=“todo(type)”>MyBtn</button>

Or

<button @click=“todo(‘edit’)”>edit</button>
<button @click=“todo(‘delete’)”>delete</button>

And the todo function like this:

todo(type){
  if(type == “edit”){
    // do something 
    // also you can link to another function to make your codes clear like this :
    // this.editFunction();
  }
  if(type == “delete”){
    // do something 
  }
}