VueJS issue #5674

Iterate "tr" element recursively

by Raphael Gabriel

HTML

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
	<table class="table">
		<tbody>
			<tr is="row-item" v-for="(row, index) in rows" :row="row" :current="index"></tr>
		</tbody>
	</table>
</div>
<script type="text/x-template" id="row-item-template" xmlns:v-on="http://www.w3.org/1999/xhtml">
<!-- <tbody> -->
    <tr>
        <td>
            <i class="fa fa-plus-square" v-on:click="toggle"></i> {{ current }}
		</td>
		<td v-for="(column, key) in columns" class="text-right">
            {{ row[key] == undefined ? "0.00 CHF" : row[key] }}
        </td>
    </tr>
    <tr is="row-item"
        v-show="open"
        v-for="(row, index) in row.children"
        :row="row"
		:current="index">
    </tr>
	<!-- </tbody> -->
</script>

CSS

.table td{
    border-top: 1px solid #f4f4f4;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
i{
	cursor: pointer;
}

JavaScript

Vue.component('row-item', {
	template: "#row-item-template",
	props: {
        row: Object,
        current: ""
    },
    data: function () {
        return {
            open: false,
			columns: {
                "B2017": "B2017",
                "R2015": "R2015",
                "R2017": "R2017",
                "R2014": "R2014"
            }
		}
	},
	computed: {
    },
    methods: {
        toggle: function () {
			this.open = !this.open;
		}
	}
});


new Vue({
  el: '#app',
  data: {
    rows: {
		"1 MSG": {
			"B2017": "1.00 CHF",
			"R2015": "1.00 CHF",
			"R2017": "1.00 CHF",
			"R2014": "1.00 CHF",
			children: {
				"100000": {
					"B2017": "1.00 CHF",
					"R2017": "1.00 CHF"
				},
				"100001": {
					"R2014": "1.00 CHF",
					"R2017": "1.00 CHF"
				}
			}
		},
		"2 MVO": {
			"B2017": "1.00 CHF",
			"R2015": "1.00 CHF",
			"R2017": "1.00 CHF",
			"R2014": "1.00 CHF",
			children: {
				"100005": {
					"B2017": "1.00 CHF",
					"R2015": "1.00 CHF"
				},
				"100042": {
					"R2016": "1.00 CHF",
					"R2014": "1.00 CHF"
				}
			}
		}
	}
  }
})