[Vuejs]-Why does table style move out when rendering rows through vue component

by

0👍

✅

This probably happens because it renders invalid HTML. Your template contains a <div> as parent of <tr> which is invalid. Check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr (under “Permitted parents”)

0👍

You are adding an extra div on your template, remove it:

template: `
    <tr class="main_table_tr" v-for="(row, index) in listOfRows">
    <td class="main_table_td column_1">{{index + 1}}</td>
    <td class="main_table_td column_2">{{row.inDoc.docNumber}}</td>
    <td class="main_table_td column_3">{{row.sku.code}}</td>
    <td class="main_table_td column_4">{{row.sku.name}} </td>
    <td class="main_table_td column_5">{{row.serial}} </td>
    <td class="main_table_td column_6">{{row.expireDate}} </td>
    <td class="main_table_td column_7">{{row.qty}}</td>   
    <td class="main_table_td column_8">{{row.sku.unit.unit}}</td>  
    <td class="main_table_td column_9">{{row.price}}</td>  
    <td class="main_table_td column_10">{{row.vatPrice}}</td>  
    <td class="main_table_td column_11">{{row.total}}</td>  
    <td class="main_table_td column_12">{{row.vatTotal}}</td>  
    <td class="main_table_td column_13">{{row.inDoc.docDate}}</td>  
    <td class="main_table_td column_14">{{row.inDoc.contractor.name}}</td>  
    <td class="main_table_td column_15">{{row.inDoc.type.docType}}</td>  
    <td class="main_table_td column_16">{{row.inDoc.owner.fullName}}</td>         
    </tr>`,

Leave a comment