錯誤：vue.js:634 [Vue 警告]：屬性或方法“item”未在實例上定義，但在渲染期間被引用

Question

對不起。 我不明白，為什么 Vue 執行代碼 v-for 並與另一個中斷

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

沒用的

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

工作代碼：

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

我使用了 Django，因為選項：分隔符：['[[', ']]']

幫幫我，請理解這個錯誤。

Answer 1

該問題是由於您的 HTML 無效造成的。

Vue 正在驗證您的文檔結構，因為<tr>應該只是<table> 、 <thead> 、 <tbody>或<tfoot> 元素（請參閱<tr> ：表格行元素 - 技術摘要 - 允許的父母） ，您的v-for表達式不會被評估。

這是一個工作示例...

 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>