Question

我创建了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']

我的模板是

     <table class="table">
      <thead>
          <tr>
              <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(item, index) in items" :key="index">
              <td v-for="(column, indexColumn) in columns" :key="indexColumn" v-html="item[column]"></td>
          </tr>
      </tbody>
    </table>

我仅在价格列上绑定了v-on：keyup事件吗？我只希望价格列具有触发计算方法。

    methods: {
        calculate: function () {
          // to do...
        }
    }

Answer 1

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

也许您只需要在该列上单击事件-> v-on：click

Answer 2

由于keyup事件冒泡，您只需将事件处理程序添加到适当的<td>元素即可。

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

表TD上的事件

2 个答案: