Vue.JS“TypeError：reverseMessage不是函数”

Question

我正在尝试使用 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 不是函数。 （在“reverseMessage()”中，“reverseMessage”未定义）

• 渲染错误：“TypeError：reverseMessage 不是函数。（在 'reverseMessage()' 中，'reverseMessage' 未定义）”

• 属性或方法“reverseMessage”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中还是基于类的组件中

如何让

<reverse>

组件反向显示给定的字符串？

Answer 1

您看到的错误是由于 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 插值，而不要对用户提供的内容使用 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/[email protected]"></script>

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

Answer 2

我的答案并不直接适用于上面的问题，但它确实适用于谷歌搜索

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

呃我真是太傻了...

对我来说，我在一个巨大的文件中定义了

methods

对象，所以我没有看到第二个对象覆盖了我的第一个对象。

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

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

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

...我刚刚合并了两者

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