Javascript 组件计算属性未定义
组件的ComputedJavascript 组件计算属性未定义,javascript,vue.js,ecmascript-6,vuejs2,vue-component,Javascript,Vue.js,Ecmascript 6,Vuejs2,Vue Component,组件的Computedname属性未定义 <template> <div class="person"> <p>{{name}}</p> </div> </template> <script> export default { name: 'person', data () { return { firstName: 'John',
name
属性未定义
<template>
<div class="person">
<p>{{name}}</p>
</div>
</template>
<script>
export default {
name: 'person',
data () {
return {
firstName: 'John',
lastName: 'Doe',
}
},
computed: {
name: () => {
return `${this.firstName} ${this.lastName}`
}
}
}
</script>
{{name}}
导出默认值{
姓名:'人',
数据(){
返回{
名字:“约翰”,
姓氏:“Doe”,
}
},
计算:{
姓名:()=>{
返回`${this.firstName}${this.lastName}`
}
}
}
结果在未定义未定义中,我已经有了类似的问题,因为computed必须有一个setter和一个getter,如下所示:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
创建setter/getter并不能解决您的问题,因为您创建了一个常规函数(
function(){}
),而不是一个没有自己的的箭头函数(()=>{}
),这个@PatrickEvans上下文可以绑定到箭头函数吗?@JockyDoe否,当尝试使用bind
、call
等时,thisArg
参数将被忽略