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

Question

我有两个名为 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 不会增加

先感谢您。

Answer 1

您正在成为 Vue变更检测警告之一的牺牲品……Vue无法检测到属性添加或删除因此，对于您的新记录，您需要在将新值分配给时设置属性orderthis.order = {&nbsp; quantity_ordered: 0,&nbsp; ...event.params // if "quantity_ordered" is set here, it will override the default.}或在之后动态设置if (this.order.quantity_ordered == undefined) {&nbsp;&nbsp; this.$set(this.order, 'quantity_ordered', 0)}如评论中所述，您还应该将 data 属性默认为0如果它是数字的data: () => ({&nbsp; code: '',&nbsp; table_name: '',&nbsp; customer_name: '',&nbsp; employee_name: '',&nbsp; menu_name: '',&nbsp; quantity_ordered: 0 // 👈})