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

我正在使用两个SVG图标（@单击）更改购物车数量的值。单击此按钮还可以更改以下输入的值：

<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循环？

vue js的创建者说

v-model无法处理隐藏输入，因为 在使用Vue时不应使用隐藏输入。 既然可以将状态存储在JS中，为什么还要将状态存储在DOM中 直接的

因此，您可以创建一个方法，将您的逻辑放在那里，并在单击

SVG图标（@click）

---

vue js的创建者说

v-model无法处理隐藏输入，因为 在使用Vue时不应使用隐藏输入。 既然可以将状态存储在JS中，为什么还要将状态存储在DOM中 直接的

因此，您可以创建一个方法，将您的逻辑放在那里，并在单击

SVG图标（@click）

---

终于为我自己找到了解决办法

首先，我递增/递减该值，使其在span标记中发生变化。然后我调用

handleQtyChange（++cartItem.qty，cartItem.rowId，$event）

函数

<div class="orderItem" v-cloak v-for="(cartItem, key, index)  in cart.items">
        <div class="quantity">
            <div class="caret caret-up" v-on:click="handleQtyChange(++cartItem.qty,cartItem.rowId, $event)" title="ব্যাগে আরও একটি পণ্য যোগ করুণ">
                <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>
            <div class="caret caret-down" v-on:click="() => (cartItem.qty <=0 ? '' :  handleQtyChange(--cartItem.qty,cartItem.rowId, $event))" title="ব্যাগ থেকে একটি পণ্য বাতিল করুণ">
                <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>

---

终于为自己找到了解决方案

首先，我递增/递减该值，使其在span标记中发生变化。然后我调用

handleQtyChange（++cartItem.qty，cartItem.rowId，$event）

函数

<div class="orderItem" v-cloak v-for="(cartItem, key, index)  in cart.items">
        <div class="quantity">
            <div class="caret caret-up" v-on:click="handleQtyChange(++cartItem.qty,cartItem.rowId, $event)" title="ব্যাগে আরও একটি পণ্য যোগ করুণ">
                <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>
            <div class="caret caret-down" v-on:click="() => (cartItem.qty <=0 ? '' :  handleQtyChange(--cartItem.qty,cartItem.rowId, $event))" title="ব্যাগ থেকে একটি পণ্য বাতিল করুণ">
                <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>