VueJS购物车计数防负值问题：如何阻止计数变为负数？

问题核心 #

当count为0时点击「移除商品」按钮，当前代码会直接执行count--导致数值变为负数，同时模板中的条件渲染逻辑存在重复判断的问题。

修复步骤 #

1. 限制移除按钮的执行逻辑
   在decrement方法中增加判断，仅当count大于0时才执行减1操作：

decrement(){
  if(this.count > 0){
    this.count--
  }
}

2. 修正条件渲染的逻辑错误
   原模板中v-else-if = count与v-if=count的判断逻辑完全一致，永远不会触发。需要明确判断count的具体状态：

<h1 v-if="count > 0"> 已添加商品 {{count}} 件 </h1>
<h1 v-else-if="count === 0"> 请添加商品 </h1>
<h1 v-else> 暂无商品 😢</h1>

3. 修复CSS样式的语法错误
   .btn-container中的align-items和justify-content属性值不需要加引号，否则会导致样式失效；同时border-radius的写法有误，应去掉solid：

.btn-container{
  align-items:center;
  justify-content:center;
  display: flex;
  padding:5px;
  margin:5px;
  background-color: red;
}
.button{
  padding : 1vw;
  margin: 1vw;
  background-color: aquamarine;
  border-radius: 1px;
}

完整修正代码 #

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement(){
      if(this.count > 0){
        this.count--
      }
    }
  },
  mounted() {
    this.increment()
    // this.decrement()
  }
}
</script>

<template>
  <div class="btn-container">
    <button class="button" @click="increment">加入购物车</button>
    <button class="button" @click="decrement">移除商品</button>
  </div>
  <h1 v-if="count > 0"> 已添加商品 {{count}} 件 </h1>
  <h1 v-else-if="count === 0"> 请添加商品 </h1>
  <h1 v-else> 暂无商品 😢</h1>
</template>

<style>
  .btn-container{
    align-items:center;
    justify-content:center;
    display: flex;
    padding:5px;
    margin:5px;
    background-color: red;
  }
  .button{
    padding : 1vw;
    margin: 1vw;
    background-color: aquamarine;
    border-radius: 1px;
  }
</style>

内容的提问来源于stack exchange，提问作者Aahad