Vue JS - 如果输入失去焦点则触发方法

Question

关于 Vue JS 的快速问题。在我的网站上，我有一个购物车，用户可以输入任何数量。当他输入时，我正在将这个数量保存到数据库表中......

问题是，输入字段会不断触发保存方法的每一位用户类型。例如，如果用户键入 123，则保存方法调用 3 次。1 和 12 和 123

我只想在这个输入失去焦点时调用这个保存方法，所以我只能保存一次，而不是每个数字。

成分

Vue.component('product-counter', {
props: ['quantity'],
data: function () {
    return {
        count: this.quantity
    }
},
template: `
        <div class="input-group ">
          <input  v-bind:value="quantity" v-on:input.focus="$emit('input', $event.target.value)"  type="text" class="form-control col-2">
        </div>
        `
 })

组件调用

                <product-counter 
                             v-bind:productcode="item.productCode"  
                             v-bind:quantity="item.quan" 
                             v-on:input="item.quan=updateItemQuantity($event,item.productCode)" 
                             v-on:increment-quantity="item.quan=updateItemQuantity(item.quan,item.productCode)" 
                             v-on:decrement-quantity="item.quan=updateItemQuantity(item.quan,item.productCode)"></product-counter>

Vue：方法

        "updateItemQuantity": function (totalquantity, pcode) {
       if (totalquantity != '') {
           ... Update Database...              
        }
    }

Answer 1

您正在侦听input事件，每次输入值更改时都会触发该事件，因此每次键入或删除字符时都会触发该事件。相反，您应该监听该blur事件，该事件仅在输入失去焦点时触发。

您可以通过组件传递它，就像传递输入事件一样。

TLDR：将 UpdateItemQuantity 耦合到v-on:blur而不是v-on:input，并确保blur从您的产品计数器组件中$emit事件。

提示：将客户端状态 (item.quan) 和服务器端“状态”（您的数据库）分成两种不同的方法。您希望该值反映用户实时输入的内容 ( input)，这与您想要更新数据库的内容（不是实时的，仅在blur）相冲突。否则，您可能会遇到用户看不到他们键入的内容的情况，因为 item.quan 永远不会更新。