时间戳

首页 > 解决方案 > v-runtime-template vuejs 无法访问根属性

javascript - v-runtime-template vuejs 无法访问根属性

问题描述

这是我的页面.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?a0​​26:628 [Vue 警告]：属性或方法“sample”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

我已经阅读了一些 github 问题，就像这样告诉我类似的问题。

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

标签： javascriptvue.jsvue-cli

解决方案

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

运行时枢轴：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>

更好的解决方案仍然向你们开放。

推荐阅读