Project_members.vue

<template>
  <div class="fourteen wide column">
    <h1 class="ui header">Gérer les membres</h1>

    <form
      id="form-members"
      action="."
      method="post"
      enctype="multipart/form-data"
      class="ui form"
    >

      {{ formset.non_form_errors }}
      <table class="ui red table">
        <tbody>
          <thead>
            <tr>
              <th>Membre</th>
              <th>{{ formset.empty_form.level.label }}</th>
            </tr>
          </thead>
          <div id="formsets-members">
            {{ formset.management_form }}
            <!--             {% for form in formset %} {% if not form.DELETE.value %} {% for
            hidden in form.hidden_fields %} -->
            // ! À adapter une fois défini comment faire le formulaire
            <!-- <div v-frag v-for="form in Object.entries(formset)" :key="form.level.id_for_label">
              <div v-frag v-if="!form.DELETE.value">
                <span v-for="hidden in form.hidden_fields" :key="hidden">
                  {{ hidden }}
                </span>
                <tr>
                  <td>
                    {{ form.last_name.value }} {{ form.first_name.value
                    }}<br /><i>{{ form.username.value }}</i>
                  </td>
                  <td>
                    <div class="required field">
                      <div class="ui selection search dropdown">
                        <input
                          type="hidden"
                          :name="form.level.html_name"
                          :id="form.level.id_for_label"
                          :value="form.level.value"
                        />
                        <div class="default text"></div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                          {% for x,y in form.level.field.choices %}
                          <div
                            v-for="(x, y) in form.level.field.choices"
                            :key="y"
                            class="item"
                            :data-value="x"
                            :selected="form.level.value === x"
                          >
                            {{ y }}
                          </div>
                        </div>
                      </div>
                      {{ form.level.errors }}
                    </div>
                  </td>
                </tr>
              </div>
            </div> -->
          </div>
        </tbody>
      </table>

      <div class="ui divider"></div>

      <button type="submit" class="ui teal icon button">
        <i class="white save icon"></i> Enregistrer les changements
      </button>
    </form>
  </div>
</template>

<script>
import frag from "vue-frag";

export default {
  name: "Project_members",

  directives: {
    frag,
  },

  data() {
    return {
      formset: {
        non_form_errors: null,
        empty_form: {
          level: {
            label: null,
          },
          non_form_errors: null,
          management_form: null,
          forms: [
            {
              title: {
                value: "test",
              },
            },
          ],
          prefix: null,
          hidden_fields: null,
          title: {
            id_for_label: null,
            field: {
              max_length: null,
            },
          },
          nested: {
            management_form: null,
          },
        },
        management_form: null,
        forms: [],
        prefix: null,
        hidden_fields: null,
        title: {
          id_for_label: null,
          field: {
            max_length: null,
          },
        },
        nested: {
          management_form: null,
        },
      },
    };
  },
};
</script>