如何使用vue自定义指令呈现x模板？

Question

我有一个angularjs指令，我试图用vuejs复制它

Twig (项目标记，它是原始的angularjs代码)：

<a class="animated fade-in-right" v-for="project in projects">
    <project project-on-delete="onDelete" project-show-delete-action="true" project-allow-delete="project.ownerId == user.id" project-show-progress="true" project-show-status="true"></project>
</a>

然后在实际的directive.js中，调用了另一个小枝模板，如下所示：

return {
    restrict: 'E',
    scope: true,
    templateUrl: 'project.tpl.html',

该文件是script标记中的html，如下所示：

<script type="text/ng-template" id="project.tpl.html">
  html
</script>

现在，我的问题是，如何使用vue指令在project.tpl.html标记中呈现<project>？

如果不是很具体的话，我想要这样做：

<project>
  project.tpl.html
</project>

Answer 1

看起来问题就在于我给出的id；而使用id="project-template解决了我的问题。可能与身份证名中的点不兼容。