输入在vue中失去焦点时如何执行功能

Posted 2023-02-16

【中文标题】输入在vue中失去焦点时如何执行功能

【英文标题】：How to execute function when input loses focus in vue

【发布时间】：2021-12-14 12:56:08

【问题描述】：

我有一个输入字段，可以在那里输入金额。所以我的目标是当用户在输入字段之外点击时，更新购物车。

<div v-for="item in cart.attributes.items" :key="item.id">
                <div class="row">
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 cart-items">
                        <strong> item.product_name </strong>
                        <br/>
                        <div class="number-of-tickets">
                            <input id="cart_amount" type="number" min="1" class="col-1 form-control cart-input" v-model="item.amount">
                            <div> x €  item.price_excl_vat </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                        <a class="remove" @click.prevent="removeProductFromCart(item.id)"><i class="far fa-trash-alt"></i></a>
                    </div>
                </div>
            </div>

因此，正如您在此处看到的，有一个带有 v-model“item-amount”的输入字段。这也是我获取数据的功能：

updateCart(id, amount) 
            cartHelper.updateCart(id, amount, (response) => 
                this.$store.dispatch('updateProductsInCart', 
                    cart: response.data,
                )
            );
        

所以每当我点击输入字段的外部时，我想用输入字段的数量来渲染 updateCart 函数。

【参考方案1】：

您想要的是在您离开该字段后立即更新购物车金额。

您已经为此创建了 html 事件 blur：

<input 
  id="cart_amount"
  @blur="updateCart(/* right params */)"
  ...>

一旦输入失去焦点，事件就会触发。