Vue.js 桌上活动

我创建了Vue表组件，并且有项目和列

    items: [
        {
            'id':'1',
            'title': '<input type="text">',
            'description': '<input type="text">',
            'price': '<input type="number">'
        },
        {
            'id':'2',
            'title': '<input type="text">',
            'description': '<input type="text">',
            'price': '<input type="number">'
        }
    ],
    columns: [ 'id', 'title', 'description', 'price']

---

V-on:keyup应该在刚刚释放某个键时触发，例如当您按下enter:V-on:enter时。 因此，首先，您需要指定一个键。其次，如何将按键事件连接到表列

---

可能您只需要在该列上单击事件->v-on:click

由于

键启动事件气泡，您只需将事件处理程序添加到相应的
元素即可

<td 
    v-for="(column, indexColumn) in columns" 
    :key="indexColumn" 
    v-html="item[column]"
    v-on="column === 'price' ? {'keyup': calculate} : {}"
/>


我创建了添加新表行的metod。我想自动计算价格列中的所有值。如果你理解我。例如，我有六行，我想在用户停止键入price列时计算所有六个price列。这是计算属性的完美用例，比如：`totals（）{返回this.items.reduce（（acc，curr）=>acc+curr.price，0）}`
    methods: {
        calculate: function () {
          // to do...
        }
    }

<td 
    v-for="(column, indexColumn) in columns" 
    :key="indexColumn" 
    v-html="item[column]"
    v-on="column === 'price' ? {'keyup': calculate} : {}"
/>