alexjoverm / v-runtime-template

Vue component for compiling templates on the fly using a v-html like API
MIT License
605 stars 72 forks source link

Error in render: "TypeError: Cannot read property 'sayHi' of undefined" #31

Closed y-tsuno closed 5 years ago

y-tsuno commented 5 years ago

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"
  },
ianwremmel commented 5 years ago

I'm seeing similar issues. It looks like https://github.com/alexjoverm/v-runtime-template/commit/de3e504bc5b57ddd9816ed58b084b12ea12a3d3a is having unintended side effects.

In my case, I'm getting

Error in render: "TypeError: this$1.$options.computed is undefined" found in ---> <VRuntimeTemplate> <PressDynamicContent> at ui/ud-ui/app/javascript/packs/ud_ui/components/dynamic-content/component.vue <Root>

with a stack trace that leads back to https://github.com/alexjoverm/v-runtime-template/blob/de3e504bc5b57ddd9816ed58b084b12ea12a3d3a/index.js#L40

ianwremmel commented 5 years ago

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

gowdaabhishek1990 commented 5 years ago

Facing similar issue even with 1.5.2

bbird1980 commented 5 years ago

Same issue, need to check this.$options.computed (methods, ...) for existance.

hunterae commented 5 years ago

Same issue here - also rolled back to 1.5.2

carmas123 commented 5 years ago

See my issue: https://github.com/alexjoverm/v-runtime-template/issues/34

sunada-ke commented 5 years ago

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.

rentalhost commented 5 years ago

This issue don't occur for me in 1.5.2, but after 1.6.1 it does, and 1.6.2 don't fixes it.

vendor.js:47104 [Vue warn]: Error in render: "TypeError: Cannot read property 'getActions' of undefined"

found in

---> <VRuntimeTemplate>
       ...

Related to this lines:

https://github.com/alexjoverm/v-runtime-template/blob/7fb4238015da3468f019cf928fa09a07559d379d/index.js#L39-L40

The this.$options.methods and this.$options.computed is undefined here in some cases. I have checked with vue 2.5 and 2.6 and the problem is the same.

It seems to be implemented by #21. The example App.vue implements methods and computed, so @Pyro979 maybe don't identified this at time.

As immediate workaround, I need back to 1.5.2 version.

@Pyro979 or @alexjoverm could you please fix that? I am not able to modify it to a PR at moment.

Thanks!

defaye commented 5 years ago

I'm getting the same issues with Version 1.6.2 and it works with 1.5.2

brendon commented 5 years ago

Same here when using a computed value for the template.

brendon commented 5 years ago

I went to see if I could work on this but I'm not sure how to run the test suite. Is there any documentation on that?

a-bashtannik commented 5 years ago

1.6.2 fails with all methods defined. Downgrade to 1.52 works for me too.

hunterae commented 5 years ago

@alexjoverm : any update on when this issue might be addressed? Seems like everybody here has had to downgrade to 1.5.2

efstajas commented 5 years ago

Dang, what? This happens to me even when downgrading all the way to version 1.4.0. Any ideas? I'm confused. This is blocking me big-time.

Edit: Nevermind, I'm an idiot, lockfile was causing it to keep reinstalling the most recent version.

hunterae commented 5 years ago

I just put a PR in to fix this issue: https://github.com/alexjoverm/v-runtime-template/pull/45. I also pinged @alexjoverm directly on Twitter just now to see if we can get a fix merged in for this since a lot of us seem to be having the same problem(s).

moltar commented 5 years ago

Can confirm that downgrading to 1.1.0 fixes this for me.

dcb99 commented 5 years ago

Downgrading to 1.5.2 also fixed this problem for me.

alexjoverm commented 5 years ago

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

Pyro979 commented 5 years ago

Thanks @alexjoverm. I'm working with this code now, so I'll keep an eye out for issues.