使用 VueJS 上的按钮递增时输入未更新答案

【问题标题】：Input not updated when incrementing with button on VueJS使用 VueJS 上的按钮递增时输入未更新
【发布时间】：2020-10-19 03:11:52
【问题描述】：

我有两个组件，分别称为 OrderComponent 和 ModalOrder（使用 vue-modal-js）

我将数据从 OrderComponent 传递给 ModalOrder，在 ModalOrder 中，我使用一个输入标签来包含 quantity_ordered 和 button 来增加它的值，就像这样

<!-- ModalOrder.vue -->
<input v-model="order.quantity_ordered" />
<button @click.prevent="increment"></button>

在我的脚本标签中

// ModalOrder.vue
<script>
export default {
  name: "ModalOrder",
  methods: {
    beforeOpen (event) {
      // if there's a data passed from the OrderComponent, I put it to "order" data
      this.order = event.params

      // if there's no data passed a.k.a a new record, I have to set the default value to 0
      if (this.order.quantity_ordered == undefined) { 
        this.order.quantity_ordered = 0
      }
    },
    ...
    increment() {
      this.order.quantity_ordered += 1
      // this method will not increment the input UI, if it's a new record
    },
  },
  data() {
    return {
      order : {
        code: '',
        table_name: '',
        customer_name: '',
        employee_name: '',
        menu_name: '',
        quantity_ordered: ''
      },
    }
  }
}
</script>

我的问题是每当我想创建一个新的订单数据时，当我点击按钮增加时，输入值 UI 没有增加

提前谢谢你。

【问题讨论】：

尝试将quantity_ordered初始化为数字而不是字符串，即quantity_ordered: 0
我在这里包含了视频预览giphy.com/gifs/ehDntZosN39B9oJpAc
新订单event.params的价值是多少？ null, undefined?

标签： javascript vue.js

【解决方案1】：

你正在成为 Vue 的 change detection caveats 之一的牺牲品...

Vue 无法检测到属性添加或删除

因此，对于您的新记录，您需要在将新值分配给 order 时设置属性

this.order = {
  quantity_ordered: 0,
  ...event.params // if "quantity_ordered" is set here, it will override the default.
}

或动态设置之后

if (this.order.quantity_ordered == undefined) { 
  this.$set(this.order, 'quantity_ordered', 0)
}

如 cmets 中所述，您还应该将 data 属性默认为 0，如果它是数字的话

data: () => ({
  code: '',
  table_name: '',
  customer_name: '',
  employee_name: '',
  menu_name: '',
  quantity_ordered: 0 // ?
})

【讨论】：