我有一个用户数据对象,它有一个first_name和last_name以及一个返回全名的计算属性,但是下面的这个似乎在我的v-for指令中有用吗?
new Vue({
el: '#content',
data: {
"users": [
{
"id": 3,
"first_name": "Joe",
"last_name": "Blogs"
},
{
"id": 3,
"first_name": "Jane",
"last_name": "Doe"
}
]
},
computed: {
fullName: function (user) {
return user.first_name + ' ' + user.last_name;
}
}
});
<tr v-for="user in users | orderBy fullName(user)">
<td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
{{fullName(user)}}
</td>
<tr>
答案 0 :(得分:18)
我不相信Vue.js中的计算属性可以接受参数,他们应该能够在没有额外交互的情况下自己构建。我相信你的错是你编写了一个方法,然后尝试将其注册为计算属性。
因此,只需将您的函数注册从computed
更改为methods
就可以了,这应该是一个简单的修复。
methods: {
fullName: function (user) {
return user.first_name + ' ' + user.last_name;
}
}
这样您就不必更改任何其他代码了。
答案 1 :(得分:15)
尝试在计算属性上禁用缓存,如https://github.com/vuejs/vue/issues/1189中所述。这样做,将始终重新计算计算值。
computed: {
fullName: {
cache: false,
get() {
return user.first_name + ' ' + user.last_name;
}
}
}
答案 2 :(得分:3)
计算属性不支持这样的嵌套。
证明和一些解决方法/替代解决方案:https://github.com/vuejs/vue/issues/66
答案 3 :(得分:1)
您可以映射计算属性中的用户并使用该映射数组,如下所示:
computed: {
fullName: function () {
return this.users.map(
item => item.first_name + ' ' + item.last_name
);
}
}
然后在视野中你可以做类似的事情:
<tr v-for="(user, item) in users">
<td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
{{fullName[item]}}
</td>
<tr>
我正在使用es6箭头功能。如果您不想使用箭头功能,那么您可以执行以下操作:
return this.users.map(
function(item) {return item.first_name + ' ' +item.last_name}
);
答案 4 :(得分:0)
我有一个类似的情况,当我使用具有未清除的嵌套属性的props属性。出于某种原因,我做了这项工作
console.log(user.first_name)
fullName: function (user) { console.log(user.first_name) return user.first_name + ' ' + user.last_name; }
另外,我使用lambda表达式完成了这项工作 https://stackoverflow.com/a/46234335/726751
computed: {
fullName: _this => {
return _this.user.first_name + ' ' + _this.user.last_name;
}
}
答案 5 :(得分:0)
我在这里有一个类似的问题:How to dinamically make computed in Vue.js, under dynamically loaded data。
但是,最后,从我经过讨论和反复试验得出的结论来看,这是为您提供的可能解决方案。有几种方法:
item.computedProperty()
(带有双括号)对其进行调用items
,创建一个观察器,该观察器会将计算所得的值分配给每个元素,然后放入extendedItems
内。计算的函数在绑定到UI时将变为反应性,因此UI将使用extendedItems
而非items
this.$set
手动设置并启用对计算对象的反应性。这是使用从解决方案编号1开始的带有功能的计算得出的:
new Vue({
el: '#content',
data: {
"users": [
{
"id": 3,
"first_name": "Joe",
"last_name": "Blogs"
},
{
"id": 3,
"first_name": "Jane",
"last_name": "Doe"
}
]
},
computed: {
extendedUsers: function(){
var users = this.users;
for (var i in users)
this.extendUser(users[i])
},
extendUser: function(user){
user.fullName = function(){
return user.first_name + " " + user.last_name;
}
}
}
});
<tr v-for="user in users | orderBy user.fullName()">
<td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
{{user.fullName()}}
</td>
<tr>
答案 6 :(得分:0)
另一个原因:带下划线(_
)前缀的属性不会触发computed
。
惊喜:_
和$
前缀是reserved in Vue。
答案 7 :(得分:-3)
为这样的事情制作计算属性有点过分。
<tr v-for="user in users | orderBy fullName(user)">
<td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
{{user.first_name + ' ' + user.last_name}}
</td>
<tr>