v-runtime-template: Error in render: "TypeError: Cannot read property 'sayHi' of undefined"

i use v-runtimetempalte in nuxtjs When I define a method, an error like title will be generated Is there any way to solve it?

index.vue

<template>
  <section class="container">
    <div>
      <v-runtime-template :template="template"></v-runtime-template>
    </div>
  </section>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo,
    VRuntimeTemplate
  },
  methods: {
    sayHi() {
      console.log("Hi")
    }
  },
  data() {
    return {
      name:"abcd",
      template: `<div><logo :name="name"/></div>`,
    }
  },
}
</script>

Logo.vue

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>

<script>
export default {
  props: ["name"],
  methods: {
    test() {
      console.log("test")
    },
  }
}
</script>

node_modules/v-runtime-template/dist/v-runtime-template.cjs.js:53:83

      //build new objects by removing keys if already exists (e.g. created by mixins)
      Object.keys($data).forEach(function (e) {if(typeof this$1.$data[e]==="undefined") { passthrough.$data[e] = $data[e]; }} );
      Object.keys($props).forEach(function (e) {if(typeof this$1.$props[e]==="undefined") { passthrough.$props[e] = $props[e]; }} );
      Object.keys(methods).forEach(function (e) {if(typeof this$1.$options.methods[e]==="undefined") { passthrough.methods[e] = methods[e]; }} );
      Object.keys(computed).forEach(function (e) {if(typeof this$1.$options.computed[e]==="undefined") { passthrough.computed[e] = computed[e]; }} );
      Object.keys(components).forEach(function (e) {if(typeof this$1.$options.components[e]==="undefined") { passthrough.components[e] = components[e]; }} );

      var methodKeys = Object.keys(passthrough.methods || {});
      var dataKeys = Object.keys(passthrough.$data || {});

package.json

  "dependencies": {
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.11",
    "express": "^4.16.4",
    "nuxt": "^2.4.0",
    "v-runtime-template": "^1.6.2"
  },

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 19 (2 by maintainers)

Most upvoted comments

I had to roll back to 1.5.2 to get moving again.

Hey everyone, sorry for the waiting, is fixed in the latest version 805095cfea226ac1eaf696a7f44adea70c5cfd49

Same issue, for some reason, after installing vue2-filters and add the file inside the plugins key of nuxt.config.js, the error disappeared. I don’t know why. I’m using nuxt2.