vue에서 입력이 포커스를 잃었을 때 함수를 실행하는 방법

vue에서 입력이 포커스를 잃었을 때 함수를 실행하는 방법

입력란이 있어서 거기에 금액을 입력할 수 있습니다.따라서 사용자가 입력 필드 외부를 클릭했을 때 카트를 업데이트하는 것이 목표입니다.

<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 함수를 렌더링하고 싶습니다.

당신이 원하는 것은 현장을 떠나는 즉시 카트 수량을 갱신하는 것입니다.

html 이벤트가 있습니다.blur이것만을 위해 만들어진 것:

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

이벤트는 입력이 포커스를 잃으면 바로 트리거됩니다.

언급URL : https://stackoverflow.com/questions/69769051/how-to-execute-function-when-input-loses-focus-in-vue