如何在Vuetify的输入值中使用Django的模板标签？

Question

我想将Django的模板标签与Vuetify的输入值结合使用。
在Vuetify的正式文档中，它是按以下值的设置方法编写的。
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

您正在form循环的每次迭代中渲染整个for，这将破坏您的HTML。您可能想要执行以下操作，而不是呈现循环中每个字段的值：

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