Error: vue.js:634 [Vue warn]: Property or method "item" is not defined on the instance but referenced during render

Question

Sorry. I don't understand, why Vue executes code v-for and broken with another

<div v_model="main">
    <tr v-for="item in main" >
        <th scope="row">[[ item.name ]]</th>
    </tr>
</div>

dosn't wort

<div v_model="main">
    <tr v-for="item in main" >
        <th scope="row">[[ item.name ]]</th>
    </tr>
</div>

working code:

<li class="form-control input-xs" v-for="item in main">
    <label> [[ item.name ]] </label>
</li>

I used Django, because option: delimiters: ['[[', ']]']

Help me, please understand this error.

Answer 1

The issue is due to your invalid HTML.

Vue is validating your document structure and since <tr> should only ever be a child of <table> , <thead> , <tbody> or <tfoot> (see <tr> : The Table Row element - Technical summary - Permitted parents ), your v-for expression is not evaluated.

Here's a working example...

 new Vue({ delimiters: ['[[', ']]'], el: "#app", data: { main: [ { name: "Learn JavaScript", done: false }, { name: "Learn Vue", done: false }, { name: "Play around in JSFiddle", done: true }, { name: "Build something awesome", done: true } ] } })

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <div id="app"> <table border="1"> <tr v-for="item in main" > <th scope="row">[[ item.name ]]</th> <td>[[ item.done ? '✔️' : '❌' ]]</td> </tr> </table> </div>