Как сделать это правильно?

Question

[Сева]

Привет,

я снова выхожу на связь со своими велосипедами на Vue.

В порядке самообразования неспешно пилю компонент для вывода грида. Поскольку предполагается, что он должен быть переиспользуемый - никакой data-specified логики, вроде обработки событий, в нем быть не должно - поэтому я хочу вынести ее в компонент-родитель. Например:

grid.vue

<td v-for="(key, index) in columns" v-html="render(entry, key, index)" @click="click(entry, index)"></td>

render: function (entry, key, index) {
      if (this.columns[index].render) {
        return this.columns[index].render(entry)
      } else return entry[key['name']]
    },
    click: function (entry, index) {
      if (this.columns[index].click) {
        this.columns[index].click(entry)
      } else return false
    }

goods.vue

const gridColumns = [
  { name: 'inStock', sortable: false, label: 'Available', render: renderAvailability, click: this.changeAvailability }
]

changeAvailability (entry) {
  this.updateGoods({
    id: entry._id,
    data: { inStock: !entry.inStock }
  })
}

let renderAvailability = (entry) => '<span class="badge badge-pill badge-' + (entry.inStock ? 'success' : 'danger') + '">' + (entry.inStock ? 'In Stock' : 'Out of Stock') + '</span>'

И если с render еще куда ни шло, то вот практика пробрасывания @click таким образом кажется мне мегапохабной. Тем более, что событие в итоге вешается на td'шку, а не на нужный мне span внутри нее.

Вопрос - как сделать это по-человечески? Спасибо

Answer 1

[Evgeny Kulakov]

Вот такой вариант, наверное он не оптимальный, но вроде решает задачу разделения данных: https://codepen.io/kerf/pen/gWzZVB .
Смысл в том, что когда нужно отображать какой-то шаблон для ячейки, то создаем отдельный компонент. В родителе описываем объект свойств, которые нужно передать и вешаем обработчик.

Comments

[Сева]

Ага, так приличнее, спасибо. Буду пробовать.

Answer 2

[Александр Аксентьев]

нормальный вариант, по другому все равно нет способов скорее всего.

Делал форматтеры примерно так же через жопно, клики не приходилось, но других вариантов не вижу для клика.
https://github.com/S-anasol/siahub/blob/master/res...
https://github.com/S-anasol/siahub/blob/master/res...

Comments

[Сева]

Ну проблема в том, что внутрь v-html нельзя запихнуть @click, но наверняка же есть красивое решение. Иначе получается, что у меня на каждой td'шке висит обработчик, это совсем грустно как-то.

[Александр Аксентьев]

Сева: в этом и дело. Пример с роутером выше, вешать не на все, а только на определенные по параметрам.
Прокинуть @клик внутрь способов не видел, код просто не выполняется как тимплейт полноценный только html

Answer 3

[Антон Антон]

https://ru.vuejs.org/v2/guide/components.html#%D0%...