我没有使用cube-ui实现菜单栏显示订购的数量但是有bug

Question

这是计算菜单栏订购数量的计算属性
countAll() {
return function(index) {
let ret = [];
this.goods.forEach((good) => {
const { foods } = good;
let count = 0;
foods.forEach((food) => {
count += food.count || 0;
});
ret.push({ count });
});
this.count[index] = ret[index].count;
return ret[index].count;
};
},
},
我写了个vshow来判断是否显示或隐藏
v-show="count[index] > 0"
为什么只有到订购数量>=2的时候那个数字才会显示呢？

Answer 1

ustbhuangyi 2020-06-11 23:31:41

计算属性通常是一个函数内部返回一个值，而不是返回一个函数，你的用法很奇怪，这样改就行了



把 count 定义成计算属性

然后模板这么用就行

• 提问者 lcyjerry #1

  好的谢谢老师 那为什么我那样会无限循环呢

• ustbhuangyi 回复 提问者 lcyjerry #2

  如果你在计算属性回调中又更新了计算属性依赖的数据，就会触发循环更新。

Answer 2

ustbhuangyi 2020-06-10 22:18:02

我跑你的代码是 ok 的啊

• 提问者 lcyjerry #1

  不是,是左侧的那个小吃食品 特色粥品之类的旁边的数字，现在我的代码只能在订购数量大于2的时候显示那个小吃食品 特色粥品旁边的数字，减少到0的时候也不会自动消失

• 提问者 lcyjerry #2

  <i class="count" v-show="count[index] > 0">
                {{ countAll(index) }}
  
      countAll() {
        return function(index) {
          let ret = [];
          this.goods.forEach((good) => {
            const { foods } = good;
            let count = 0;
            foods.forEach((food) => {
              if (!food.count) {
                this.$set(food, "count", 0);
                count += food.count;
              } else {
                count += food.count;
              }
            });
            ret.push({ count });
          });
          this.count[index] = ret[index].count;
          return ret[index].count;
        };
      },
  
  老师这是两段代码

• 提问者 lcyjerry #3

  我上传到github了 老师
  https://github.com/lcyjerry/Vue-sell/blob/master/src/components/goods/goods.vue

Answer 3

ustbhuangyi 2020-06-10 09:37:12

你把代码传到 GitHub 上，我抽空帮你看看

• 提问者 lcyjerry #1

  怎么传啊老师

• ustbhuangyi 回复 提问者 lcyjerry #2

  GitHub 新建一个仓库，上传代码， 如果没用过 GitHub，建议找一些入门文章看看，这个是程序员必会的

• 提问者 lcyjerry 回复 ustbhuangyi #3

  https://github.com/lcyjerry/Vue-sell/blob/master/src/components/goods/goods.vue 老师这是那个组件我已经上传了