当输入在值中失去焦点时如何执行函数

Question

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

<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函数

Answer 1

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

你有一个html事件blur只是为了这个:

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

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