Context not available...
Vue.component("custom-table", {
name: 'CustomTable',
template: "#custom-table",
created: function() {
console.log('Created', this.rows);
},
mounted: function() {
console.log('Mounted', this.rows);
},
data: function() {
},
props: {
rows: Array
}
});<script type="text/x-template" id="custom-table">
<table>
<thead>
<slot name="head"></slot>
</thead>
<tbody slot name="body">
</tbody>
</table
</script>
<custom-table :rows="myRows">
<thead slot="head">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody v-for="item in myRows">
<tr slot="body">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</custom-table>I encountered this issue...
Property or method "item" is not defined on the instance but referenced during rendering. Please ensure reactive data properties are declared in the data option. (located in the root instance)
Also, myRows contains
[
{ name: 'Name1', age: 20 },
{ name: 'Name2', age: 30 }
]