I'm trying to display a string in reverse, using Vue. My template is:

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

And my script:

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

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

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

This fails with the following console errors:

• TypeError: reverseMessage is not a function. (In 'reverseMessage()', 'reverseMessage' is undefined)

• Error in render: "TypeError: reverseMessage is not a function. (In 'reverseMessage()', 'reverseMessage' is undefined)"

• Property or method "reverseMessage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ponents, by initializing the property

How do I get the <reverse> ponent to display a given string in reverse?

I'm trying to display a string in reverse, using Vue. My template is:

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

And my script:

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

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

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

This fails with the following console errors:

• TypeError: reverseMessage is not a function. (In 'reverseMessage()', 'reverseMessage' is undefined)

• Error in render: "TypeError: reverseMessage is not a function. (In 'reverseMessage()', 'reverseMessage' is undefined)"

• Property or method "reverseMessage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ponents, by initializing the property

How do I get the <reverse> ponent to display a given string in reverse?

• javascript
• vue.js
• vuejs2

• 1 Your reverseMessage function has to be defined as your Vue instance method inside of methods: {}. Check if that works. Also, isn't it better to define it in your reverse ponent and call it there (without the prop)? It's what's that ponent is for after all. – dziraf Commented Sep 12, 2018 at 6:17

2 Answers 2

The errors you're seeing are due to the fact that Vue is not aware of the global function you've defined (i.e., reverseMessage()). Vue does not provide access to global functions/variables when rendering templates. The local functions it has access to are declared in the ponent's methods property. In your case, it would look like this:

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

Since it seems that ponent's purpose is to reverse the given string, there's no need to specify a prop for the reverseMessage function, so you can remove it from props:

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

Your template uses the v-html directive to show the reversed message, but that's unnecessary because (1) the message itself is not HTML, and (2) Vue remends against it for user input:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

Instead, you should use string interpolation for this:

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

Vue.ponent('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./[email protected]"></script>

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

My answer doesn't apply directly to the question above but it does apply to the google search of

Vue.JS "TypeError: <functionName> is not a function"

Ugh I'm so silly ...

For me I had methods objects defined and in a giant file so I didn't see the second is overriding my first one.

methods: {
  importantFunctionThatIsNotWork: () => {}
}, 

... // Many many lines in file in a env where my IDE doesn't show collisions

methods: {
  allMyOtherFunctions: () => {}
  // ...
},

... I just merged the two

methods: {
  importantFunctionThatIsNotWork: () => {},
  allMyOtherFunctions: () => {}
  // ...
},