Question

我试图将发票模板html代码保存到mysql数据库，然后在vue中加载它并从mysql向数据添加属性

这就是我的意思

假设我有以下模板

<div>
 <h1>Medical certificate</h1>
 <h2>{{userame}}</h2>

 <div>

所以我在mysql中保存上面的html代码并获取它，现在我想用vuejs2注入用户名的值

那是

data:()=>({
 username:'testuser',
 html_template:''
 }),

 methods:{
   getTemplateFromHtml(){
    this.$http.get('')
      .then((res)=>{this.html_template = res.data})

   }

  }

在模板部分我有

<template>
   <div v-html="html_template"></div>
<div>

现在，在向渲染的html代码（来自mysql）中注入username的值时会出现问题。用户名的值永远不会传递。我如何继续这个？

Answer 1

您正在寻找v-runtime-template

<template>
  <div>
        <v-runtime-template :template="html_template"></v-runtime-template>
    </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

export default {
  name: "App",
  data: () => ({
    username: "testuser",
    html_template: `
    <div>
      <h1>Medical certificate</h1>
      <h2>{{username}}</h2>
    <div>
    `
  }),
  components: {
    VRuntimeTemplate
  }
};
</script>

这是sandbox

Vuejs2在数据中传递动态数据

1 个答案: