Vue中如何在input失去焦点时触发函数实现购物车更新

你可以直接利用输入框的原生失焦事件实现需求，操作非常简单：

1. 修改你的循环中input标签的代码，添加@blur事件绑定即可：

<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_${item.id}`" 
          type="number" 
          min="1" 
          class="col-1 form-control cart-input" 
          v-model="item.amount"
          @blur="updateCart(item.id, 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>

说明 #

• @blur是Vue对输入框失焦事件的封装，当用户点击输入框外部、切走页面焦点等操作导致输入框不再处于激活状态时就会触发，完全匹配你要的「点击输入框外部触发更新」的需求
• 这里把原来固定的id="cart_amount"改成了动态拼接的id，是因为v-for循环渲染多个输入框时，固定id会导致DOM出现重复id的异常，不影响功能但不符合规范
• 你已经通过v-model绑定了item.amount，所以失焦时item.amount已经是输入框的最新值，直接传给你已经定义好的updateCart方法即可完成购物车更新

如果有特殊场景需要严格判断只有点击页面其他区域才触发，再考虑全局点击事件的监听方案，常规场景下上述方法就足够使用。

内容的提问来源于stack exchange，提问作者magic bean