vue 템플릿에서 console.log 또는 console.error를 사용하는 방법

vue 템플릿에서 console.log 또는 console.error를 사용하는 방법

Vue 구성 요소가 있고

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

주다

app.js:47961 [Vue warn]:속성 또는 메서드 "console"은 인스턴스에서 정의되지 않고 렌더링 중에 참조된다.

window.console역시 효과가 없다.

디버깅할 템플릿에서 콘솔과 창을 사용하는 올바른 방법은?

메소드를 사용하지 않고 인라인으로 실행하려면 추가하십시오.this형식:

코드펜: 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)
  }
} 

템플릿에 글로벌 개체를 제공하는 가장 간단한 방법은 글로벌 개체를computed, 다음과 같은 경우:

console: () => console.도 마찬가지다.window,

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

여기서 봐.

또한 {{}}}부터 콘솔에 액세스하려면 글로벌 믹스인을 사용하십시오.

Vue.mixin({
    computed: {
        console: () => console
    }
})

사용할 수 있다$el.ownerDocument.defaultView.console.log()템플릿 내부

Pro: 구성 요소를 변경할 필요가 없음
콘: 못생겼어

Vue 3을 사용하는 경우 다음을 수행하십시오.

const app = createApp(App)

app.config.globalProperties.$log = console.log

Vue 2를 사용하는 경우 다음을 수행하십시오.

Vue.prototype.$log = console.log

사용하다$log내부 템플릿:

<h1>{{ $log(message) }}</h1>

렌더링을 방해하지 않으려면$log와 함께??(또는)||다음부터 Vue 2를 사용할 경우??템플릿에서 지원되지 않음:

<h1>{{ $log(message) ?? message }}</h1>

콘솔 템플릿 변수를 위한 Getter를 만드는 경우:

    get console() { return window.console; }

콘솔이나 랩 콜 대신 이 콘솔을 사용하여 콘솔을 사용할 수 있으며, eslint 구성을 규칙과 함께 사용하고 있다.'no-console': 'off'

이 경우에는 계산된 속성이나 방법을 사용할 수 있다.Vue 템플릿에서 javascript로 코딩해야 하는 경우.데이터에서 콘솔을 정의해야 한다.

아래 코드를 확인하십시오.

data(){
        return {
                selected :"a",
                log : console.log
                }
            }
<span>{{log(selected)}}</span>

이렇게 하면 템플릿을 해결하는 동안 console.log 기능을 사용할 수 있게 된다.

참조URL: https://stackoverflow.com/questions/51080447/how-can-i-use-console-log-or-console-error-in-a-vue-template