v-runtime-template vuejs 无法访问 root 属性

Question

这是我的page.vue

<template>
   <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
 
export default {
  data: () => ({
    template: `
      <span>{{sample}}</span>
    `
  }),
  components: {
    VRuntimeTemplate
  },
  computed:{
    sample(){ return "sampledata" }
  }
};

我的package.json:

"vue": "^2.6.11",
"v-runtime-template": "^1.10.0"

问题：我在控制台上遇到此错误：

vue.esm.js?a026:628 [Vue warn]: Property or method "sample" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property..

我已经阅读了一些 github 问题，因为 this 告诉了我类似的问题。

也许有人可以帮助我如何解决我使用这个 v-runtime-template 库的简单实现？非常感谢。

Answer 1

我不知道这个技巧如何解决我的问题，但这真的救了我的命。通过 H.Eden 因此，我通过创建新的 vue 文件作为 v-runtime-template pivot 来解决我的问题。

RuntimePivot:vue:

<template>
  <v-runtime-template :template="`<div>${template}</div>`"></v-runtime-template>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
export default {
    props:['template','props','listener'],
    components:{
        VRuntimeTemplate
    },
    name:"RuntimePivot",
    data(){
        return {
            myname:'everything'
        }
    },
    
}
</script>

然后我将 runtimePivot.vue 模板导入到我的 Page.vue

<template>
  <div>
    <RuntimePivot :template="template" :props="properties" /> 
  </div>
</template>

<script>
import RuntimePivot from "./RuntimePivot";
export default {
    components:{
        RuntimePivot 
    },
    name:"Page",
    data(){
        return {
            template:`<span>{{key}}</span>`,
            properties:{key:"value"}    
        }
    },
    
}
</script>

更好的解决方案还在向大家开放

v-runtime-template vuejs 无法访问 root 属性

v-runtime-template vuejs cannot access root property

javascript

vue.js

vue-cli