Vue 2.0+ v-for. Getting a 'Property or method is not defined on the instance but referenced during render` error #4276
Description
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" }
]
}