我有一个计数
You have {{ keywordsLeft }} keywords left
和我的Vue。
var u = new Vue({
el:'#app',
data:{
keywords:keywords,
user:user,
total_keywords:user.total_keywords,
},
computed: {
keywordsLeft: function () {
var left = total_keywords-keywords.length;
if(left<=0){
return 0;
} else {
return left;
}
}
},
methods: {
deleteKeyword: function(keyword){
var i = this.keywords.indexOf(keyword);
this.keywords.splice(i,1);
}
}
// rest of VUE code.
每当对数据进行更新时,计算的值都不会更新。我必须刷新页面才能做到这一点。我认为计算属性的目的是实时反应?我错过了什么吗?
我是否需要以某种方式明确更新它?重新计算是手动吗?请原谅我,如果我是愚蠢的,但如果没有自动完成,这似乎是浪费。也许只需使用jquery然后lol
答案 0 :(得分:2)
计算属性是自动计算的,它们就是你应该在这种情况下使用的。
我猜问题就在于代码中的某个地方,它会更新您的实际数据。它的使用方式与Vue的反应系统无关。这种情况发生在很多人身上:))
我建议您阅读本指南https://vuejs.org/v2/guide/reactivity.html和此https://vuejs.org/v2/guide/list.html#Array-Change-Detection以了解数组上的问题。
添加了:
我现在看到了你的问题。在keywordsLeft computed属性中,您不是指Vue实例的数据,而是实际上是指原始数据。关键字.length是指原始关键字对象及其长度。与total_keywords相同 - 它不引用Vue实例的数据。您应该使用 this.keywords 和 this.total_keywords 。
我始终保持实例数据属性名称与外部/全局/非Vue数据不同。我说这样的事情更好:
data: {
myKeywords: keywords,
myTotalKeywords: totalKeywords
...
}
这样你就无法混合你所指的东西。现在你应该在Vue实例的范围内引用this.myKeywords等。
答案 1 :(得分:1)
K我只是将它移动到一个方法中解决了它。虽然我觉得这是错的,但它确实有效。现在还不确定计算属性的用途。因为它们似乎只计算一次?
无论如何,我是如何修理它的。
HTML
You have {{ keywordsLeft() }} keywords left
Vue
var u = new Vue({
el:'#app',
data:{
keywords:keywords,
user:user,
total_keywords:user.total_keywords,
},
methods: {
keywordsLeft: function () {
var left = total_keywords-keywords.length;
if(left<=0){
return 0;
} else {
return left;
}
}
},
超级简单。
答案 2 :(得分:0)
这个问题对我来说经常发生。
为解决这个问题,我尝试将key
添加为该计算值,并且效果很好。
<span :key="keywordsLeft">
You have {{ keywordsLeft() }} keywords left
</span>
...
computed: {
keywordsLeft: function () {
var left = total_keywords-keywords.length;
if(left<=0){
return 0;
} else {
return left;
}
}
},
更改键后,该组件(dom)将重新呈现。