Vue计算属性未按预期更新

时间:2017-09-24 09:14:27

标签: vue.js computed-properties

我有一个计数

  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

3 个答案:

答案 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)将重新呈现。