如何在v-html

Question

我有一个json文件，其中包含要用作某种模板的html文本。问题是没有插值胡须值。我究竟做错了什么？谢谢

已更新：http://jsfiddle.net/euo3dsa1/7/

---

var json = {
  "templates": {
    "base": {
      "name": "base",
      "keys": "name",
      "body": "<div>{{fields.name}}</div>"
    },
    "base1": {
      "name": "base1",
      "keys": "name, email",
      "body": "<div>{{fields.email}}</div>"
    }
  }
}

    
    
new Vue({
  el: "#app",
  data: {
	selected_template: "base",
  	templates: json.templates,
    fields: {
      name: "John Doe",
      email: "lalal@lala.com"
    }
  },
  computed: {
  	template_preview: function() {
    	return this.templates[this.selected_template].body
    }
  }
})

.content {
  margin: 30px 0;
  height: 300px;
  border: 2px dashed #eee;
}
.r { color: red; }
.g { color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <select v-model="selected_template">
    <option disabled value="">Select a template</option>
    <option v-for="template in templates" v-bind:value="template.name">{{template.name}}</option>
  </select>
  <span>selected: {{selected_template}}</span>
  
  <div class="content">
     <span class="r">Doesn't work:</span><br/>
     <div v-html="template_preview"></div>
     {{template_preview}}
     <hr/>
     <span class="g">Works:</span><br/>
      {{fields.name}} - {{fields.email}}
  </div>
</div>