Accessing nested object data from laravel blade about vue-table HOT 3 OPEN

@securit The detail row is another table row directly underneath the current data row. It is supposed to be used to display additional information pertain to the given data row which may not have enough space or irrelevant to show on normal row, e.g. the contact info of a customer, etc.

The detail row callback makeDetailRow can only contain valid constructed html. The callback cannot processes any Vue related code, so it will just display what you return back to it. So, v-for will in your code will never work and gets ignore since it is not a known html attributes.

I'm not sure how you picture your log table output, so I can't really suggest anything. Sorry.

from vue-table.

Modifying makeDetailRow a little works a bit better, however it strips the <table> tag and doesnt take up the full width of the parent table

makeDetailRow: function (data) {
                var returnStr = '<div class="detail-row"><div class="form-group"><label>Properties: </label><table><tr>';

                for (var key in data.properties) {
                    if (data.properties.hasOwnProperty(key)) {
                        returnStr += '<td><ul>';
                        for (var attribute in data.properties[key]) {
                            returnStr += '<li><strong>' + attribute + ': </strong>' + data.properties[key][attribute] + '</li>';
                        }
                        returnStr += '</ul></td>';
                    }
                }

                returnStr += '</tr></table></div></div>';
                return (returnStr);

from vue-table.

@securit Your code looks fine. I really have no idea why the <table> tag was stripped.

In order for the inside table to take up the full width, you may need to use CSS to target it and set the width to 100%.

from vue-table.