Странное поведение при рендеренге таблицы, почему?

Question

[Konstantin Malyarov]

Vue.component('table-operations', {
    delimiters: ["{>", "<}"],
    props: ['operations'],
    template: '<table class="table table-bordered table-of-contents">' +

    '<tr class="table-info">' +
    '<th>ФИО</th>' +
    '<th>Дата операции</th>' +
    '<th>Кат.</th>' +
    '<th>Диагноз</th>' +
    '<th>Название опер.</th>' +
    '<th>Анест.</th>' +
    '<th>Время</th>' +
    '</tr>' +

    '<draggable v-model="operations"' +
    ':options="{group:\'operations\'}">' +

    '<tr v-for="operation in operations">' +
    '<item-operation v-if="(operation.is_planed === false) && (operation.is_completed === false)"' +
    ':operation="operation"></item-operation>' +
    '</tr>' +

    '</draggable>' +

    '</table>'
})

Vue.component('item-operation', {
    delimiters: ["{>", "<}"],
    props: ['operation'],
    template:
    '<td>{>operation.last_name<} {>operation.birthday<}</td>' +
    '<td>{>operation.date_operation<}</td>' +
    '<td>{>operation.pay.short_name<}</td>' +
    '<td>{>operation.diagnosis<} ({>operation.mkb<})</td>' +
    '<td>{>operation.operation_name<}</td>' +
    '<td>{>operation.anesthesia.short_name<}</td>' +
    '<td>{>operation.anesthesia_time<}</td>'
})

Если убрать тег draggableто рендерит нормально.

Пример из доков.

Answer 1

[Evgeny Kulakov]

Компонент item-operation должен иметь один корневой тэг, у вас их несколько.

Comments

[Konstantin Malyarov]

Evgeny Kulakov в смысле? Даже если один корневой тег (про который я не понял). Почему тогда без тега draggable все прекрасно работает?

[Evgeny Kulakov]

Konstantin Malyarov, вот так попробуйте:

'<template v-for="operation in operations">' +
    '<item-operation v-if="(operation.is_planed === false) && (operation.is_completed === false)"' +
    ':operation="operation"></item-operation>' +
'</template>'

Vue.component('item-operation', {
    delimiters: ["{>", "<}"],
    props: ['operation'],
    template:
    '<tr>' +
    '<td>{>operation.last_name<} {>operation.birthday<}</td>' +
    '<td>{>operation.date_operation<}</td>' +
    '<td>{>operation.pay.short_name<}</td>' +
    '<td>{>operation.diagnosis<} ({>operation.mkb<})</td>' +
    '<td>{>operation.operation_name<}</td>' +
    '<td>{>operation.anesthesia.short_name<}</td>' +
    '<td>{>operation.anesthesia_time<}</td>' +
    '</tr>'
})

Answer 2

[0xD34F]

Гм-гм... Опять несколько корневых элементов сделали - не далее как месяц назад, вы уже сталкивались с подобной проблемой. Не надоело продолжать наступать на одни и те же грабли?

Так, теперь что делать.

1. Заголовок таблицы оборачиваете в thead
   
2. В draggable добавляете атрибут element="tbody"
   
3. Элемент tr из шаблона компонента table-operations выбрасываете, v-for будет по item-operation
   
4. В компоненте item-operation оборачиваете все td в один общий tr