I'm trying to port an AngularJS directive over to VueJS, but I have been unable to crack this particular nut...
To put it simply, I have a "generic" list directive. Under each invocation of the directive is a <template> tag that defines how the tbody is rendered. In AngularJS I was able to accomplish this by DOM-replacing the tbody[target='true'] in #myDirectiveBaseTemplate with the contents of my-directive > template per invocation of <my-directive> (plus a little $compile service majic mixed in to make it a-go-go).
VueJS doesn't seem to give me access to this low-level functionality, or when it (kinda sorta) does it doesn't give me a reference to the current _element so I do not have access to each invocation's <template> tag.
The simplified AngularJS directive code is defined something like this:
<my-directive data="some.list" mapping="[ 'property', 'property2' ]">
<template>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.property}}</td>
<td>{{item.property2}}</td>
</tr>
</tbody>
</template>
</my-directive>
myDirective first pulls in the base text/ng-template, which looks something like this:
<script type="text/ng-template" id="myDirectiveBaseTemplate">
<table>
<thead>
<tr ng-repeat="prop in mapping" ng-click="doSort(prop)">
{{prop}}
</tr>
</thead>
<tbody target="true"></tbody>
</table>
</script>
During render, tbody[target='true'] in #myDirectiveBaseTemplate is DOM-replaced with each invocation's my-directive > template whereby creating custom HTML for each invocation of my-directeive based on each embedded template.
So... how in the hell do I accomplish this in VueJs?!?
EDIT 1:
A Second invocation of my-directive could looks like this:
<my-directive data="some.list" mapping="[ 'order.delivered', 'person.name', 'person.dob' ]">
<template>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.order.delivered ? 'Delivered' : ''}}</td>
<td>{{item.person.name}}</td>
<td>{{item.person.dob | format:'yyyy-mm-dd'}}</td>
</tr>
</tbody>
</template>
</my-directive>
And just to note, the example above has been simplified. my-directive actually can define up to 5 different <template>s within itself to modify various parts of the "generic" list (e.g. <template type='row'>, <template type='help'>, etc.). However, all serve the same purpose; to modify/add-to various parts of the DOM of the underlying directive's HTML.