2017-08-28 5 views
0

オブジェクト私は(Vueのイベントに加えて)標準JavaScriptイベントを発するようにしたいので、私はVueのコンポーネント内の次のコードを持っている:ヴュー:イベントがアクセスできない

<template> 
    <div> 
    <input 
     type="text" 
     class="input" 
     v-model.trim="value" 
     :id="id" 
     :placeholder="placeholder" 
     :disabled="disabled" 
     :required="required" 
     :readonly="readonly" 
     autocomplete="off" 
     @keyup="keyUp" 
     @focus="focus" 
     @click="click" 
     @dblclick="dblclick" 
     @change="change"> 
    </div> 
</template> 

<script> 
export default { 
    methods: { 
     change() { 
      // Vanilla event 
      let element = document.querySelector(`#${this.id}`); 
      let event = new Event('change', { 'bubbles': true, 'cancelable': false }); 

      element.dispatchEvent(event); 

      // Vue event 
      this.$emit('change'); 
     } 
    } 
} 
</script> 

しかし、私は次の取得バニラに関するエラーイベント:

'Event' is not defined 

私は何が欠けていますか?

+0

どのブラウザを使用していますか? –

+0

'Chrome Version 60.0.3112.113' – Donnie

+0

カスタムイベントを発生させる理由は何ですか?コンソールを開くと、手動でイベントを作成できますか? –

答えて

-1

これはうんざりですが、これは注文と関係している可能性があります。 Vueは、イベントリスナーをアタッチしている要素の中に入れます。 vueを作成した後で、すべてのイベントリスナーをアタッチしてみてください。私たちはイベントリスナーを含む既存のJavaScriptコードとうまく共存するvueを持っています。しかし、私たちはそれを気に入らず、古いものを取り除く上で良い進歩を遂げています。 (本当に必要ですか?)

+0

コンポーネントがマウントされた後、新しいリスナーを追加しています。そのため、適切な形状にする必要があります。残念なことに、私は別の解決策を見ないので、私はこれを理解しなければならないと思う。 – Donnie

関連する問題