vuejs dynamic component throw error for v-bind:is, error is Property or method ... is not defined on the instance but referenced during render

Question

Code in the file:

<template>
  <component v-bind:is="bbc"></component>
</template>

<script>

import bbc from './bbc.vue';

  export default {
    name: 'ShowRoom2',
  };
</script>

./bbc.vue

<script>
  export default {
    name: 'bbc',
    props: {
      msg: String,
    },
    mounted() {
      console.log('bbc is mounted');
    },
    render() {
      if (this.func) this.func();
      return (
        <div class="bbcMyClass">
          <h1>bbc: <span>Pal</span> <span>{this.msg}</span></h1>
        </div>
      )
    }
  };
</script>

To reproduce

git clone [email protected]:adamchenwei/vue-hoc-playground.git
go to src/components/ShowRoom2.vue
yarn install && yarn serve
observe error in the local browser

@boussadjrabrahim sorry, I may misunderstood what you said, but document says otherwise (granted, Vue document is not very up to date for some parts) vuejs.org/v2/guide/components-dynamic-async.html — ey dee ey em
– ey dee ey em, Commented Oct 19, 2018 at 16:54

bastien girschig · Accepted Answer · 2018-10-19 16:52:25Z

3

Yes, the scope in the template is not the same as the script scope. If you need some data, you need to declare it inside the 'component' definition part of the code. For your case, I guess the 'data' property should work

import bbc from './bbc.vue';

export default {
  name: 'ShowRoom2',
  data() {
    return {
      bbc: bbc,
    };
  },
};

However, the template part of your code also looks weird. Could you explain what you're trying to do ?

answered Oct 19, 2018 at 16:52

bastien girschig

9057 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ey dee ey em Over a year ago

hi, thanks for the answer. I am trying to use dynamic component as a alternative to create HOC, which involving adding class name and such into a wrapped component, which I suppose that <component> thingie can help to do? so next step I am going to do is <component class="something" data-something="somethingelse"...><...>

bastien girschig Over a year ago

HOC ? I'm not familiar with that.

ey dee ey em Over a year ago

it kinda does similiar stuff! I am going for this approach instead of HOC for now (since its not very well implemented in Vuejs, various articles show that). Thanks!

Collectives™ on Stack Overflow

vuejs dynamic component throw error for v-bind:is, error is Property or method ... is not defined on the instance but referenced during render

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related