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>的子代（请参见{{ 3}}），则不会对您的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>

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

1 个答案: