错误：vue.js:634 [Vue 警告]：属性或方法“项目”未在实例上定义，但在渲染期间被引用

Posted 2023-02-23

【中文标题】错误：vue.js:634 [Vue 警告]：属性或方法“项目”未在实例上定义，但在渲染期间被引用

【英文标题】：Error: vue.js:634 [Vue warn]: Property or method "item" is not defined on the instance but referenced during render

【发布时间】：2020-01-01 05:35:49

【问题描述】：

对不起。我不明白，为什么 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，因为选项：分隔符：['[[', ']]']

帮帮我，请理解这个错误。

【问题讨论】：

用 item.name 替换 [[ item.name ]] 也 v_model 实际上是 v-model。阅读 vue 文档并慢慢跟进。你不需要那个 v-model="main" 来让循环工作

抱歉，Django 需要带分隔符：['[[', ']]']，我忘了说

是的，我同意你关于 v-model 的看法。我不明白，因为一个案例有效，另一个无效。谢谢你的回答。

@Spangle 的评论是否回答了您的问题，还是仍然显示相同的警告？

@Phil，不，我仍然收到警告。

【参考方案1】：

问题是由于您的 html 无效。

Vue 正在验证您的文档结构，并且由于 <tr> 只能是 <table>、<thead>、<tbody> 或 <tfoot> 的子级（参见 <tr>: The Table Row element - Technical summary - Permitted parents），因此您的 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>