web-dev-qa-db-ja.com

vueテンプレートでconsole.errorまたはconsole.logを使用するにはどうすればよいですか？

vue

 <form @keydown="console.error($event.target.name);">

与える

app.js：47961 [Vue warn]：プロパティまたはメソッド「コンソール」はインスタンスで定義されていませんが、レンダリング中に参照されます。

window.consoleも機能しない

テンプレートでコンソールとウィンドウを使用してデバッグする適切な方法は何ですか？

vue.jsvuejs2vue-component
18
Toskan

メソッドを使用する代わりにインラインで実行したい場合は、フォームにthisを追加するだけです。

Codepen：https://codepen.io/x84733/pen/PaxKLQ?editors=1011

<form action="/" @keydown="this.console.log($event.target.name)">
  First: <input type="text" name="fname"><br>
  Second: <input type="text" name="fname2"><br>
</form>

ただし、関数をインラインで実行するのではなくメソッドを使用する方がよいため、より詳細に制御できます。

<!-- Don't forget to remove the parenthesis -->
<form action="/" @keydown="debug">
  First: <input type="text" name="fname"><br>
  Second: <input type="text" name="fname2"><br>
</form>

...

methods: {
  debug (event) {
    console.log(event.target.name)
  }
}
16
Un1

コンソールテンプレート変数のゲッターを作成します。

    get console() { return window.console; }
1
Vaulter

テンプレートにグローバルオブジェクトを提供する最も簡単な方法は、次のようにcomputedに配置することです。

console: () => console。 windowについても同様です。

computed: {
  console: () => console,
  window: () => window,
}

ご覧ください こちら 。

1
tao

メソッドでコンソールまたはラップ呼び出しの代わりにthis.consoleを使用できます。ルール'no-console': 'off'でeslint構成を使用しています

0
franciscorode