Vue.JS“类型错误：reverseMessage 不是函数”答案

【问题标题】：Vue.JS "TypeError: reverseMessage is not a function"Vue.JS“类型错误：reverseMessage 不是函数”
【发布时间】：2019-02-16 16:54:09
【问题描述】：

我正在尝试使用 Vue.js 反向显示字符串。我的模板是：

<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 不是函数。（在'reverseMessage()'中，'reverseMessage'是未定义的）
渲染错误：“TypeError：reverseMessage 不是函数。（在 'reverseMessage()' 中，'reverseMessage' 未定义）”
属性或方法“reverseMessage”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件

如何让<reverse> 组件反向显示给定的字符串？

【问题讨论】：

您的reverseMessage 函数必须在methods: {} 中定义为您的Vue 实例方法。检查这是否有效。另外，在reverse 组件中定义它并在那里调用它（没有道具）不是更好吗？毕竟，这就是该组件的用途。

标签： javascript vue.js vuejs2

【解决方案1】：

您看到的错误是由于 Vue 不知道您定义的全局函数（即reverseMessage()）。 Vue 在渲染模板时不提供对全局函数/变量的访问。它可以访问的本地函数在组件的methods 属性中声明。在你的情况下，它看起来像这样：

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

由于组件的目的似乎是反转给定的字符串，因此无需为reverseMessage 函数指定prop，因此您可以将其从props 中删除：

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

您的模板使用 v-html 指令来显示反转的消息，但这是不必要的，因为 (1) 消息本身不是 HTML，以及 (2) Vue recommends against it for user input：

在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致 XSS vulnerabilities。仅对受信任的内容使用 HTML 插值，从不对用户提供的内容使用。

相反，您应该为此使用string interpolation：

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>

【讨论】：