javascript - 如何处理使用 v-on :change? 隐藏的输入

Question

我正在使用两个 SVG 图标 (@click) 更改购物车数量的值。此点击还会更改以下输入的值:

<input type="hidden" id="shoppingCartQty" name="qty" v-on:change="() => (cartItem.qty <=0 ? '' :  cartItem.qty--)" :value="cartItem.qty">

更改此代码后，我想提交我的表单。但它没有触发任何事件。

<div class="orderItem" v-cloak v-for="(cartItem, key, index)  in cart.items">
    <div class="quantity">
        <div class="caret caret-up" v-on:click="cartItem.qty++">
            <svg version="1.1" x="0px" y="0px" viewBox="0 20 100 100"><polygon points="46.34,39.003 46.34,39.003 24.846,60.499 29.007,64.657 50.502,43.163 71.015,63.677 75.175,59.519 50.502,34.844   "></polygon></svg>
        </div>
        <span v-text="cartItem.qty"></span>
        <form v-on:submit.prevent="updateCart" class="form-inline">
                <input type="hidden" name="rowId" :value="cartItem.rowId">
                <input type="hidden" id="shoppingCartQty" name="qty" v-on:change="() => (cartItem.qty <=0 ? '' :  cartItem.qty--)" :value="cartItem.qty">
        </form>
        <div class="caret caret-down" v-on:click="() => (cartItem.qty <=0 ? '' :  cartItem.qty--)">
            <svg version="1.1" x="0px" y="0px" viewBox="0 -20 100 100"><polygon points="53.681,60.497 53.681,60.497 75.175,39.001 71.014,34.843 49.519,56.337 29.006,35.823 24.846,39.982   49.519,64.656 "></polygon></svg>
        </div>
    </div>
</div>

如何提交来自 for 循环的隐藏输入的表单 onchange？

Answer 1

vue js 的创建者说

v-model doesn't work on hidden input because you shouldn't be using hidden input when you are using Vue. Why store state in the DOM when you can store it in JS directly?

因此，您可以创建一个方法并将逻辑放在那里，然后在单击 SVG 图标(@click)

后调用它

Resourse Link