Vue: 입력 요소에서 use@keyup.na 사용 가능

Vue: 입력 요소에서 use@keyup.na 사용 가능

Vue 컴포넌트가 있습니다.

1. 한 사람<input>결합하는 요소v-on:keyup.enter의 열쇠.doFilter()
2. a <button>를 묶는v-on:click에 대한 이벤트.doFilter()

<input type="text" v-model="myVar" @keyup.enter="doFilter" />
<button @click="doFilter">Filter</button>

버튼 이벤트가 발생합니다.doFilter()단, 키업이벤트는 추가하지 않으면 실행되지 않습니다..native수식어

<input type="text" v-model="myVar" @keyup.native.enter="doFilter" />

Vue.js 매뉴얼에는 다음과 같은 내용이 기재되어 있습니다. .native:

컴포넌트의 루트 요소에 대한 네이티브이벤트를 리슨합니다

언제 사용해야 합니까?.native키업 이벤트가 없으면 트리거되지 않는 이유는 무엇입니까?

업데이트 1: 코드 및 코드 추가

https://codepen.io/hanxue/pen/Zapmra에서 데모 실행 가능

<div id="app">
  <md-toolbar>
    <h1 class="md-title" style="flex: 1">@keyup.native event</h1>
    <md-button class="md-icon-button">
      <md-icon>more_vert</md-icon>
    </md-button>
  </md-toolbar>

  <md-input-container>
      <label>@keyup.enter</label>
              <md-input type="text" @keyup.enter="doFilter" placeholder="@keyup.filter">
              </md-input>
          </md-input-container>

    <md-input-container>       
        <label>@keyup.native.enter</label>
              <md-input type="text" @keyup.native.enter="doFilter" placeholder="@keyup.native.filter">
              </md-input>
          </md-input-container>

    <md-input-container>       
              <button @click="doFilter" placeholder="@keyup.filter">
    @click  </button>
          </md-input-container>
</div>
<script>
Vue.use(VueMaterial)

var App = new Vue({
  el: '#app',
  methods: {
   doFilter: function() {
     alert('doFilter!')
   }
  },
})
</script>

당신의 코멘트로 보아 Vue Material Library와<md-input>대신 컴포넌트<input>요소.

들어보시면keyup를 사용하지 않는 이벤트.native수식자(경유)<md-input @keyup.enter="doFilter">컴포넌트가 대기하고 있습니다.<md-input>커스텀을 발생시키는 컴포넌트keyup이벤트입니다.

단, 그 컴포넌트는 이벤트를 송신하지 않기 때문에doFilter메서드는 호출되지 않습니다.

매뉴얼에 기재되어 있는 바와 같이.native수식자는 컴포넌트가 "루트 요소에서 발생하는 이벤트"를 수신하도록 합니다.<md-input>요소.

그렇게,<md-input @keyup.native.enter="doFilter">원어민에게 귀를 기울이다keyup의 루트 요소의 DOM 이벤트<md-input>컴포넌트를 호출하여doFilter메서드를 지정합니다.

양쪽을 리슨하고 있던 커스텀 Vue 컴포넌트에서도 같은 문제가 발생했습니다.@select그리고.@keyup.native.enter주의를 기울이지 않았기 때문에 열쇠를 두 번 받았습니다.onSelect를 방출하다onKeyDown및 을 위해서onkeyUp두 번째로 타올랐다.

제 해결책은 제 의견을 들어보는 것이었습니다.@keydown.native.enter그 때문에@select키의 사이클이 비보터링되었습니다(즉,keydown->keypresssed->keyup).

언급URL : https://stackoverflow.com/questions/47162451/vue-when-to-use-keyup-native-in-input-elements