How to handle input hidden using v-on:change?

Question

I am changing value of my cart quantity using two SVG icon(@click). This clicking also changing value of following input:

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

On change this code I want to submit my form. but it didn't triggering any 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="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>

How I submit the form onchange of hidden input which value is coming from for loop?

Answer 1

At last found a solution for myself.

First I increment/decrement the the value so it will change in my span tag. then I call handleQtyChange(++cartItem.qty,cartItem.rowId, $event) function.

<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>

Answer 2

Creator of vue js says

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?

So instead you can create a method and put your logic there and call it after clicking SVG icon(@click)

Resourse Link