Событие на столе тд - PullRequest
Новая
       14

Событие на столе тд

0 голосов
/ 24 мая 2019

Я создаю компонент таблицы 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>

Hove i bint v-on: событие keyup только для столбца цены?Я хочу, чтобы только в столбце цены был триггер для расчета метода.

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

Ответы [ 2 ]

1 голос
/ 24 мая 2019

Поскольку событие keyup всплывает, вы можете просто добавить обработчик событий к соответствующим <td> элементам. 

<td 
    v-for="(column, indexColumn) in columns" 
    :key="indexColumn" 
    v-html="item[column]"
    v-on="column === 'price' ? {'keyup': calculate} : {}"
/>
0 голосов
/ 24 мая 2019

V-on: keyup должно срабатывать, когда только что отпущена определенная клавиша, например, когда вы нажимаете enter: v-on: enter. Итак, во-первых, вам нужно указать ключ. Во-вторых, как связать событие нажатия клавиши со столбцом таблицы?

Может быть, вам просто нужно событие клика в этом столбце -> v-on: click

...