时间戳

首页 > 解决方案 > 使用 VueJS 上的按钮递增时输入未更新

javascript - 使用 VueJS 上的按钮递增时输入未更新

问题描述

我有两个名为 OrderComponent 和 ModalOrder 的组件（使用 vue-modal-js）

我将数据从 OrderComponent 传递到 ModalOrder，在 ModalOrder 中，我使用输入标签来包含 quantity_ordered 和按钮来增加它的值，如下所示

<!-- 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 不会增加

先感谢您。

标签： javascriptvue.js

解决方案

您正在成为 Vue变更检测警告之一的牺牲品……

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)
}

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

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

推荐阅读