CODEWITHSUNDEEP
vue.js
MSC
MSC

Reputation: 3386

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

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

Upvotes: 1

Views: 679

Answers (2)

Devon Bessemer
Devon Bessemer

Reputation: 35367

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

Upvotes: 1

akuiper
akuiper

Reputation: 215127

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

Upvotes: 3

Related Questions