Vue数据渲染问题

问题

        场景：在购物车中，可以输入商品数量，但输入非法数据时，会自动将商品数量修改为1。

        但发现输入非法数据后，视图中商品数量为非法数据而不是为1。

代码 

  <div class="count">
          <span @click="dec(item.id)">-</span>
          <input type="text" :value="item.goods_count" @change="number(item.id,$event)" />
          <span @click="add(item.id)">+</span>
        </div>

  number(id, e) {
      // 1. 将输入的新值转化为整数
      const parseResult = parseInt(e.target.value)
      // 2. 如果转换的结果不是数字，或小于1，则强制 number 的值等于1
      if (isNaN(parseResult) || parseResult < 1) {
        this.$emit('numChange', id, 1)
        return
      }
}

 App.vue：

<div class="app-footer">
      <Footer :count="count" :price="price" :isfull="full" @onCheckBoxChange="CheckBoxChange"></Footer>
    </div>

  numChange(id, val) {
      this.list[id - 1].goods_count = +val
    }

        当点击任意勾选事件、增减商品数量的事件后，视图会刷新为从服务区请求回来的数据中的数量（大部分为数量1）。而有趣的是当点击增减事件后，再输入负数就可以正确纠正非法数据，且只对点击事件所绑定的那个商品有效。

        经过排查后发现，是因为从服务器请求回来的数据，大部分商品数量都是1，而我们在视图上输入非法数据后，组件将这些非法数据处理为1返回app.vue，因为本身数据就为1,等于没有改变，故不会重新渲染，而我们输入的非法数据就留在的视图上。

解决方案

        先将商品数量赋值为0（因为购物车中不可能为0），再赋值给商品数量为1就可以重新渲染了。

    numChange(id, val) {
      if (+val === 1) {
        this.list[id - 1].goods_count = 0
        this.list[id - 1].goods_count = 1
      }
      this.list[id - 1].goods_count = +val
    }