Vue-js - 根据数组中的Object实例更新输入值

Question

我想用特定对象出现在对象列表中的时间来更新input的值。有没有办法使用v-model绑定数据？

app.js

const app = new Vue({
el: '#ticket',
data: {
    menuProducts: [
       'Beer',
       'Peanuts'
    ],
    ticketProducts: [
        {
            name: 'Beer',
            cat: 'Drink',
            specs: 'Lager'
        },{
            name: 'Peanuts',
            cat: 'Snack'
        },
        {
            name: 'Beer',
            cat: 'Drink',
            specs: 'Light'
        },
    ]
}
...

view.html

<div class="card-frame col-lg-6 col-xl-4" 
v-for="product in menuProducts">
    <div class="card product p-3 mb-4">
        <div class="info mt-3">
            <h5>@{{ product.nombre }}</h5>
            <input readonly type="number" value="0">
        </div>
    </div>
</div>

在此示例中，我为菜单中的每个产品呈现产品卡。在每张卡片中，我想更新input以了解我的门票中有多少产品（2瓶啤酒和1杯花生）。