Vue.js：从包含模板和数据的json文件渲染

Question

我有一个带有数据的json文件以及用于呈现该数据的模板。我们正在尝试开发一种功能，分析师可以创建模板并以段落形式关联相关数据。以下是详细的json文件，根HTML DOM元素和脚本。

data.json

    [
    {
    "data":{
    "year": "2000",
    "totpop": "1,000,000"
    },
    "template": "

    The poulation in Indianapolis in {{ item.data.year }} was {{ item.data.totpop }}.
    "
    },{
    "data":{
    "year": "2017",
    "totpop": "10,000,000"
    },
    "template": "
    The population in Indianapolis in {{ item.data.year }} is {{ item.data.totpop }}!
    "
    }
    ]

index.html with script

<div id = "app">
</div>

<script>
    apiURL = 'data.json'
    new Vue({
        el: '#app',
        data: {
            items: null
            // ,template: null
        },
        render: function (createElement) {
            if (!this.items){
                return createElement('p', 'Loading...')
            }
            else  {
                return createElement('ul', this.items.map(function (item) {
                    var res = Vue.compile(item.template).render;
                    console.log(res);
                    return createElement('li', res);
                }))
            }
        },

        created() {
            this.fetchData();
        },

        methods: {
            fetchData: function () {
                var self = this;
                $.get( apiURL, function( d ) {
                    self.items = d;
                    // self.template = Vue.compile(d[0].template).render;
                    // console.log(Vue.compile(d[0].template).render);
                });
            },                    
            // renderData: function (templ) {

            //     return Vue.compile(templ).render;

            // }
        }

    })
</script>