Vue property not defined in instance for template

Question

I have a Vue template that displays a set of tracks, but my site isn't loading. Console says

Property or method "track" 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)

I'm sure the issue has to do with parent-child vue instance relationship or something along those lines, but I'm not too sure, since I'm only starting to learn about vue.js

I read over this https://v2.vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events, but I'm having a hard time seeing what the problem is. What's going wrong?

Here's the template in html:

<div id="vue-div">
    <template v-for="track in spotifyResults.items">
         <spotify :track="track"></spotify>
    </template>

    <!-- spotify vue template -->
    <script type="text/x-template" id="spotifyResult">
        <tr>
            <td>
                <img :src="track.album.images[2].url"/>
            </td>
            <td>${track.artists[0].name}
            </td>
            <td>${track.album.name}
            </td>
            <td>${track.name}
            </td>
            <td>
                <a :href="track.uri">Play</a>
            </td>
            <td><span v-on:click="add_track_to_library(track.album.images[2].url, track.artists[0].name, track.album.name, track.name, spotify, track.uri, none)">+</span></td>
        </tr>
    </script>
</div>

And here is the js:

var spotify = {
        template: '#spotifyResult',
        delimiters: ['${', '}'],
        props: ['track']
    }

self.vue = new Vue({
    el: "#vue-div",
    delimiters: ['${', '}'],
    unsafeDelimiters: ['!{', '}'],
    components: {
        spotify: spotify,
    },
    data: {
        spotifyResults: {
                items: []
            },
    }
});

Where exactly have you put your <template v-for="track in spotifyResults... code? — Stephan-v
– Stephan-v, Commented Sep 19, 2017 at 9:12

tony19 · Accepted Answer · 2022-07-16 02:01:21Z

1

You are defining your component template incorrectly. Vue is attempting to render your #spotifyResult template as a <template> block.

To use X-Templates, you use

<script type="text/x-template" id="spotifyResult">
  <tr>
    <!-- etc -->
  </tr>
</script>

This <script> tag needs to go in your main .html file, outside the root element.

JSFiddle Demo ~ https://jsfiddle.net/7u0aboe6/3/

edited Jul 16, 2022 at 2:01

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 21, 2017 at 5:20

Phil

166k25 gold badges265 silver badges269 bronze badges

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

4 Comments

user2030942 Over a year ago

Thanks for pointing that out! I made the changes, yet I'm still getting the same error message. I've edited the original post to reflect changes.

Phil Over a year ago

@user2030942 not seeing any changes.

user2030942 Over a year ago

Check it now. I forgot to save my changes

Phil Over a year ago

@user2030942 as expected, you've put the <script> tag inside your root Vue element. Don't do that

Collectives™ on Stack Overflow

Vue property not defined in instance for template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related