V-on

lastmod 2021-07-19created 2020-10-156 edits

You can use the v-on directive to listen to DOM events and run JavaScript when they are triggered.

Simply put, think of it as v-model = v-bind:value + v-on:input.

Event

How to use events in Vue.js

Event name	Description
click	Runs when the mouse is clicked
dblclick	Runs when the mouse is double-clicked
mouseover	Runs when the mouse pointer moves onto the element
mouseout	Runs when the mouse pointer leaves the element
mousemove	Runs when the mouse pointer moves
mousedown	Runs when a mouse button is pressed
mouseup	Runs when a mouse button is released
keydown	Runs when a keyboard key is pressed
keyup	Runs when a keyboard key is released
keypress	Runs when a keyboard key is pressed and released
change	Runs when the element changes
submit	<Form> Runs when submitted
reset	<Form> Runs when reset
select	Runs when a value of <select> is selected
focus	Runs when the tag has focus
blur	Runs when the tag loses focus

:click .native

:click .stop

:click .prevent

:click .passive

:click .capture

:click .self

:click .once

Mouse

:click .left

:click .right

:click .middle

Keyboard

:keyup .ctrl

:keyup .alt

:keyup .shift

:keyup .meta

:keyup .enter

:keyup .tab

:keyup .delete

:keyup .esc

:keyup .up

:keyup .down

:keyup .left

:keyup .right

Example

html file:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

javascript file:

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

focusout vs blur

Understanding the difference between focusout and blur events :: Mygumi

As the name says, focusout is the event fired when an element loses focus. blur is an event used for the same purpose. The difference between the two is whether they bubble. For bubbling, see the other post. (http://mygumi.tistory.com/315)

focusout bubbles, and blur does not. As pairs, they are grouped as {focusin - focusout} and {focus - blur}.

Troubleshooting

Error in v-on handler: "TypeError: instance is undefined"

When a v-on event fires and you emit an event to the parent component with $emit, the following message may be printed.

[Vue warn]: Error in v-on handler: "TypeError: this._roisInfos is undefined"

found in

---> <RoisControlPanel> at src/components/Graph/RoisControlPanel.vue
       <VCard>
         <RoisWidgetTemplate> at src/components/Graph/Window/roisWidgetTemplate.vue
           <RoisWidget> at src/components/Graph/RoisWidget.vue
             <VThemeProvider>
               <VDialog>
                 <VCard>
                   <VgDetailSetting> at src/components/VisualGraph/vgDetailSetting.vue
                     <Pane>
                       <Splitpanes>
                         <VgMain> at src/pages/Main/project/setting/vgMain.vue
                           <ProjectPage> at src/pages/Main/project/ProjectMain.vue
                             <VMain>
                               <VApp>
                                 <AnswerMainPage> at src/pages/Main/AnsMain.vue
                                   <VApp>
                                     <App> at src/App.vue
                                       <Root>
vue.esm.js:628
TypeError: this._roisInfos is undefined

The faulty code in the parent component is as follows.

@Component
export default class RoisWidget extends Vue {
  private _roisInfos = new BaseRois.RoiInfoDictionary();
  // ..
}

Add the _roisInfos above to a prop.

  @Prop({ type: BaseRois.RoiInfoDictionary, default: new BaseRois.RoiInfoDictionary() }) _roisInfos;
  // ..
}

Favorite site

Event Handling — Vue.js

author Zer0 sitemap