HTML代码中vue.js V-for和Flask之间的冲突？ [重复]

Question

这个问题在这里已有答案：

• How to render by Vue instead of Jinja 5个答案

我在HTML中使用以下代码

<tr v-for="item in rowData" >
          <th scope="row">{{ item.mail }}</th>
          <td>{{ item.date }}</td>
          <td>{{ item.adress }}</td>
          <td>{{ item.company }}</td>
          <td>{{ item.fliers }}</td>
</tr>

动态地向表中添加行。当我打开html文件时，所有内容都正常使用此代码，但是当我使用Flask并在localhost上打开此代码时，我得到“jinja2.exceptions.UndefinedError：'item'未定义”。有没有办法让这个工作在Flask？

Answer 1

您没有正确循环数据。目前，item在Jinja中不作为变量存在，因此给你错误。它与Vue无关

试试这个：

{% for item in rowData%}
<tr>
  <th scope="row">{{ item.mail }}</th>
  <td>{{ item.date }}</td>
  <td>{{ item.adress }}</td>
  <td>{{ item.company }}</td>
  <td>{{ item.fliers }}</td>
</tr>
{% endfor %}

另请阅读Jinja documentation on looping。