Question

我有一个计数

  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

Answer 1

计算属性是自动计算的，它们就是你应该在这种情况下使用的。

我猜问题就在于代码中的某个地方，它会更新您的实际数据。它的使用方式与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等。

Answer 2

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;
       }
   }
},

超级简单。

Answer 3

这个问题对我来说经常发生。

为解决这个问题，我尝试将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）将重新呈现。

Vue计算属性未按预期更新

3 个答案: