我正在尝试使用 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 !',
}
})
此操作失败并出现以下控制台错误:
类型错误:reverseMessage 不是函数。 (在“reverseMessage()”中,“reverseMessage”未定义)
渲染错误:“TypeError:reverseMessage 不是函数。(在 'reverseMessage()' 中,'reverseMessage' 未定义)”
属性或方法“reverseMessage”未在实例上定义,但在渲染期间引用。通过初始化该属性,确保该属性是 react 性的,无论是在数据选项中还是基于类的组件
如何获取 <reverse>
反向显示给定字符串的组件?
最佳答案
您看到的错误是由于 Vue 不知道您定义的全局函数(即 reverseMessage()
)。 Vue 在渲染模板时不提供对全局函数/变量的访问。它有权访问的本地函数在组件的 methods
属性中声明。在你的情况下,它看起来像这样:
Vue.component('reverse', {
// ...
methods: {
reverseMessage(msg) {
return msg.split('').reverse().join('')
}
}
})
由于该组件的目的似乎是反转给定的字符串,因此无需为 reverseMessage
函数指定 prop
,因此您可以将其从 中删除> Prop
:
Vue.component('reverse', {
// ...
//props:["msgreverse", "reverseMessage"], // DON'T DO THIS
props:["msgreverse"],
})
您的模板使用 v-html
指令来显示反转的消息,但这是不必要的,因为 (1) 消息本身不是 HTML,并且 (2) Vue recommends 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.
相反,您应该使用 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>
关于javascript - Vue.JS "TypeError: reverseMessage is not a function",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52288557/