Vue.JS "TypeError: reverseMessage가 함수가 아닙니다."

Vue.JS "TypeError: reverseMessage가 함수가 아닙니다."

Vue를 사용하여 문자열을 반대로 표시하려고 합니다.템플릿:

<div id="app">
  <reverse :msgreverse="message" :reverseMessage="reverseMessage()"></reverse>
</div>

그리고 내 대본은:

function reverseMessage(msg) {
  return msg.split('').reverse().join('')
}

Vue.component('reverse', {
  props:["msgreverse", "reverseMessage"],
  template: '<p v-html="reverseMessage(msgreverse)"></p>'
})

var app = new Vue({
  el: '#app',
  data: {
    message:'The message to reverse !',
  }
})

이는 다음 콘솔오류로 인해 실패합니다.

• TypeError: reverseMessage는 함수가 아닙니다.('reverse Message'()에서는 'reverse Message'는 정의되어 있지 않습니다.)

• 렌더 오류: "TypeError: reverseMessage는 함수가 아닙니다.('reverse Message()'에서는 'reverse Message'는 정의되어 있지 않습니다.)

• 속성 또는 메서드 "reverseMessage"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.속성을 초기화하여 데이터 옵션 또는 클래스 기반 구성 요소에서 이 속성이 반응하는지 확인하십시오.

어떻게 하면<reverse>컴포넌트는 지정된 문자열을 반대로 표시합니다.

이 오류는 Vue가 정의한 글로벌 기능을 인식하지 못하기 때문입니다(예:reverseMessage()). Vue는 템플릿을 렌더링할 때 글로벌 함수/변수에 대한 액세스를 제공하지 않습니다.액세스할 수 있는 로컬 함수는 구성 요소의methods소유물.이 경우 다음과 같습니다.

Vue.component('reverse', {
  // ...
  methods: {
    reverseMessage(msg) {
      return msg.split('').reverse().join('')
    }
  }
})

이 컴포넌트의 목적은 주어진 문자열을 되돌리는 것으로 보이므로 이 컴포넌트를 지정할 필요가 없습니다.prop를 위해reverseMessage기능하고 있기 때문에, 에서 삭제할 수 있습니다.props:

Vue.component('reverse', {
  // ...
  //props:["msgreverse", "reverseMessage"],  // DON'T DO THIS
  props:["msgreverse"],
})

템플릿은v-html반전된 메시지를 표시하도록 지시하지만 (1) 메시지 자체가 HTML이 아니기 때문에, (2) Vue가 사용자 입력에 대해 반대하도록 권장하기 때문에, 그것은 불필요합니다.

웹 사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약성이 쉽게 발생할 수 있으므로 매우 위험할 수 있습니다.신뢰할 수 있는 콘텐츠에만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠에는 사용하지 마십시오.

대신 문자열 보간을 사용해야 합니다.

Vue.component('reverse', {
  // ...
  //template: '<p v-html="reverseMessage(msgreverse)"></p>'  // DON'T DO THIS
  template: '<p>{{reverseMessageg(msgreverse)}}</p>'
})

Vue.component('reverse', {
  props: ['msgreverse'],
  methods: {
    reverseMessage(msg) {
      return msg.split('').reverse().join('')
    }
  },
  template: '<p>{{reverseMessage(msgreverse)}}</p>'
})

new Vue({
  el: '#app',
  data: () => ({
    message: 'Hello Vue.js!',
  }),
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <reverse :msgreverse="message"></reverse>
</div>

언급URL : https://stackoverflow.com/questions/52288557/vue-js-typeerror-reversemessage-is-not-a-function