Vue component error: Property or method X is not defined on the instance but referenced during render

Question

I have a fairly simple setup which is failing with these errors:

Property or method "fruit" is not defined on the instance but referenced during render. Make sure that this property is reactive [etc.]

Error in render: "TypeError: Cannot read property 'name' of undefined"

Cannot read property 'name' of undefined

Not sure whether it's because the x-template referencing method is buggy. I see it's not used much.

Here's my code:

<div id="main">

  <h1>Vue Component Prop Error</h1>

    <script type="text/x-template" id="foo">
      <p>{{fruit.name}}</p>
    </script>

    <my-thing :fruit="fruits[1]"></my-thing>

</div>

<script>
    Vue.component('my-thing', {
      template: '#foo',
      props: {
        fruit: Object
      }
    });

    var app = new Vue({
      el: '#main',
      data: {
        fruits: [{
            id: 1,
            name: 'apple'
        },{
            id: 2,
            name: 'banana'
        },{
            id: 3,
            name: 'carrot'
        }]
      }
    })
</script>

What am I missing? (I'd expect to see "banana" on the screen.)

Codepen: https://codepen.io/MSCAU/pen/WagOjz

akuiper · Accepted Answer · 2018-10-23 02:42:22Z

3

Move the x-template out of the div that the main Vue instance controls:

<div id="main">

  <h1>Vue Component Prop Error</h1>

  <my-thing :fruit="fruits[1]"></my-thing>

</div>

<script type="text/x-template" id="foo">
  <p>{{fruit.name}}</p>
</script>

https://codepen.io/anon/pen/zmJzJO

answered Oct 23, 2018 at 2:42

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

Comments

Devon Bessemer · Accepted Answer · 2018-10-23 02:42:39Z

1

Having the template inside of #main is causing Vue to try to render it prior to when you want.

Moving the template outside of #main will allow it to be used as the template for <my-thing> without being rendered inside of #main.

<div id="main">
    <my-thing :fruit="fruits[1]"></my-thing>
</div>
<script type="text/x-template" id="foo">
  <p>{{fruit.name}}</p>
</script>

https://codepen.io/anon/pen/NOLgBz

answered Oct 23, 2018 at 2:42

Devon Bessemer

35.6k10 gold badges77 silver badges102 bronze badges

2 Comments

MSC Over a year ago

Two good answers at the same time. This works, thanks. Now where on earth is this documented? Not mentioned here: vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates

Devon Bessemer Over a year ago

Good question, not sure if this specifically is documented. It's just something I know from experience and something you should expect. You set your 'el' as '#main'. So anything inside of #main will be rendered with the app scope. app doesn't know you've defined that block as a template for <my-thing> or that it shouldn't try to evaluate {{ fruit.name }}.

Collectives™ on Stack Overflow

Vue component error: Property or method X is not defined on the instance but referenced during render

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related