Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error #4276

netpoe · 2016-11-22T07:28:58Z

I'm getting a 'Property or method is not defined` error:

[Vue warn]: Property or method "genre" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)
[Vue warn]: Error when rendering root instance
TypeError: Cannot read property 'key' of undefined(…)

While using a v-for="(genre, $index) in formFieldData.options":

<body id="vue-wrapper">
<music-genre-id></music-genre-id>

<script type="text/x-template" id="music-genre-id">
    <div class="grid-3">
        <article v-for="(genre, $index) in formFieldData.options">
            <span>{{ genre.key }}</span>
        </article>
    </div>
</script>

<script src="/js/third-party/vue.js"></script>
<script>
    var MusicGenreId = {
        template: '#music-genre-id',
        data: function(){
            return {
                formFieldData: {"id":"music_genre_id","value":null,"type":"select","options":[{"key":"1","value":"M\u00fasica latina","img":"\/img\/music-genres\/latino.jpg"},{"key":"2","value":"Pop","img":"\/img\/music-genres\/pop.jpg"}]},
            }
        },
        ready: function(){},
        methods: {}
    };
    Vue.component('music-genre-id', MusicGenreId);
</script>
<script>
            var vuejs = new Vue({
              el: '#vue-wrapper',
              data: {},
              ready: function(){},
              methods: {}
            });
</script>
</body>

The thing is that I used to have this kind of code in VueJS <2.0 and it worked, except for the (genre, $index) in ... of course.

How can I solve this? I need the formFieldData to be part of the component as it does not belong to the parent/root instance.

FYI
If I do only:

<music-genre-id></music-genre-id>

<script type="text/x-template" id="music-genre-id">
    <div class="grid-3">
        <article v-for="(genre, $index) in formFieldData.options">
            <span>{{ genre }}</span>
        </article>
    </div>
</script>

The browser displays:

{ "key": "1", "value": "Música latina", "img": "/img/music-genres/latino.jpg" }
{ "key": "2", "value": "Pop", "img": "/img/music-genres/pop.jpg" }

But it's not getting the property on {{ genre.key }}

Here's a jsFiddle, check the console.logs to look at the error.

Chrome DevTools VUE Tab shows the <Root> instance with a child <MusicGenreId> component and the component actually displays the data:

formFieldData: {
options: [
{ "key": "1", "value": "Música latina", "img": "/img/music-genres/latino.jpg" },
{ "key": "2", "value": "Pop", "img": "/img/music-genres/pop.jpg" }
]
}

The text was updated successfully, but these errors were encountered:

LinusBorg · 2016-11-22T09:39:02Z

You should not put script/x-template tages inside of the element that you mount to the main instance to. Vue 2.0 will read all of its content and try to use it as a template for the main instance, and Vue's virtualDOM treats script/x-template's like normal DOM, which screws everthing up,

Simply moving the template out of the main element solved the problem.

https://jsfiddle.net/fuefb1x3/1/

See vuejs/vue#4276

kyeno · 2018-04-27T12:14:07Z

Man, thanks... I spent 2 days with this and now your answer saved me. <3

netpoe changed the title ~~Vue 2.0+ getting~~ Vue 2.0+ a 'Property or method is not defined on the instance but referenced during render` error Nov 22, 2016

netpoe changed the title ~~Vue 2.0+ a 'Property or method is not defined on the instance but referenced during render` error~~ Vue 2.0+ getting a 'Property or method is not defined on the instance but referenced during render` error Nov 22, 2016

netpoe changed the title ~~Vue 2.0+ getting a 'Property or method is not defined on the instance but referenced during render` error~~ Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error Nov 22, 2016

LinusBorg closed this as completed Nov 22, 2016

j3j5 added a commit to j3j5/profe.dev that referenced this issue Nov 27, 2016

Move the template away from the mounted element.

ac7f5f2

See vuejs/vue#4276

j3j5 added a commit to j3j5/profe.dev that referenced this issue Aug 28, 2017

Move the template away from the mounted element.

158babf

See vuejs/vue#4276

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error #4276

Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error #4276

netpoe commented Nov 22, 2016 •

edited

Loading

LinusBorg commented Nov 22, 2016

kyeno commented Apr 27, 2018

Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error #4276

Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error #4276

Comments

netpoe commented Nov 22, 2016 • edited Loading

LinusBorg commented Nov 22, 2016

kyeno commented Apr 27, 2018

netpoe commented Nov 22, 2016 •

edited

Loading