vue.js - vue中输入失去焦点时如何执行函数

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 */)"
  ...>

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