如何使用带有 Vuetify 输入值的 Django 模板标签？

Question

我想将 Django 的模板标签与 Vuetify 的输入值一起使用。
在Vuetify的官方文档中，在value的设置方法中是这样写的。
https://vuetifyjs.com/ja/components/text-fields#example-disabled-and-readonly

<template>
  <v-form>
    <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6>
          <v-text-field
            value="John Doe"
            label="Regular"
            disabled
          ></v-text-field>
        </v-flex>
      </v-layout>
    </v-container>
  </v-form>
</template>

我尝试如下使用 django

<v-form method="post" novalidate>
    {% csrf_token %}
    <template>
      <v-form>
        <v-container>
          <v-layout row wrap>
            <v-flex xs12 sm6>
            {% for field in form %}
              <v-text-field
                value="{{ form }}"
                disabled
              ></v-text-field>
            {% endfor %}
            </v-flex>
          </v-layout>
        </v-container>
      </v-form>
    </template>
</v-form>

结果是这样的
image
怎么了？

Answer 1

您在 for 循环的每次迭代中渲染整个 form，这将破坏您的 HTML。您可能想要做这样的事情来呈现循环中每个字段的值：

{% for field in form %}
    <v-text-field
        value="{{ field.value }}"    <!-- note: field.value, not form -->
        disabled
    ></v-text-field>
{% endfor %}