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

原文由 AliAzra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

---

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

原文由 Excalibaard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可能是您应该使用模糊事件。视图：

     new Vue({
        el: "#app",
        data: {
            quantity: ''
        },
        methods: {
            printConsole: function () {
                console.log('blured');
            }
        }
    })

HTML:

         <div id='app'>
            <input v-bind:value="quantity" v-on:blur="printConsole" type="text" class="form-control col-2">
        </div>

参考 jsfiddle： https ://jsfiddle.net/erezka/h8g62xfr/11/

只有在您从输入中聚焦后，模糊才会发出您的更改

原文由 Erez 发布，翻译遵循 CC BY-SA 4.0 许可协议