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

时间:2019-02-04 04:39:34

标签: javascript vue.js

我正在使用两个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循环?

2 个答案:

答案 0 :(得分:0)

vue js的创建者说

  

v模型不适用于隐藏输入,因为您      使用Vue时不应使用隐藏输入。      可以将状态存储在JS中时为何将状态存储在DOM中      直接吗?

因此,相反,您可以创建一个方法并将逻辑放在此处,然后单击SVG icon(@click)

来调用它

Resourse Link

答案 1 :(得分:0)

最后为自己找到了解决方案。

首先,我增加/减少该值,以便它将在我的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>