使用 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无法检测到属性添加或删除

因此，对于您的新记录，您需要在将新值分配给时设置属性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 // 👈

})