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

Question

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

应用程序.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'
        },
    ]
}
...

视图.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 个“花生”）。