Django Form in VueJS component template

Question

I'm currently starting a project in which I'm using Django for the backend, graphql (Graphene) for the API, VueJS for the frontend, and Vue Apollo to ease running graphql queries through VueJS.

The thing is : I'm already able to do custom forms in Vue components and run the appropriate query to fetch/add/delete data. But I haven't been able to integrate Django Forms into a Vue component so far, I have no idea how to do it. I could be satisfied with custom forms, but I wan't to be able to use Django Forms since all the validation of forms is easy to do with Django.

Any help would be appreciated.

Thanks in advance,

lbris.

score 2 · Answer 1 · answered Sep 08 '20 at 11:14

I find a very clean solution to this problem to use djagno widget tweaks

With that you can have something like:

views.py

def myview(request):
    form = MyForm()
    return render(request, 'mytemplate.html', {'form': form})

mytemplate.html

{% load widget_tweaks %}
<form v-on:submit-prevent="myaction()">
    {% render_field form.field v-model="myattr" %}
</form>

And it will work flawlessly

score 0 · Answer 2 · answered Nov 04 '19 at 15:02

This is fragment of code from this article, I recommend you to read it.

you have to attach view instance to some element like starting (in example)
set delimiters, because we do not need conflicts with django template {{ }} syntax
inside div with id=starting you can place your vue custom forms

<script type="text/javascript">
new Vue({
   el: "#starting",
   delimiters: ['${', '}'],
   data: {
      articles: [],
      loading: false,
      newArticle: {...}
      ...
   }
 },
mounted: function() {
},
methods: {
 addArticle: function() {
  this.loading = true;
  this.$http.post("/api/article/",this.newArticle)
   .then((response) => {
     console.log(response);
  })
  .catch((err) => {
    this.loading = false;
    console.log(err);
  }) 
 },
 ...
}
 });
</script>

  <div id="starting">
    <form v-on:submit.prevent="addArticle()">
            <div class="modal-body">
                <div class="form-group">
                <label for="article_heading">Article Heading</label>
                <input
                     type="text"
                     class="form-control"
                     id="article_heading"
                     placeholder="Enter Article Heading"
                     v-model="newArticle.article_heading"
                     required="required" >
            </div>
             <div class="form-group">
                      <label for="article_body">Article Body</label>
                      <textarea
                        class="form-control"
                        id="article_body"
                        placeholder="Enter Article Body"
                        v-model="newArticle.article_body"
                        required="required"
                        rows="3"></textarea>
                  </div>
             </div>
          <div class="modal-footer">
             <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
       </form>
  </div>

This is what I already do (custom form with VueJS). What I want to achieve is to use builtin Django Forms (forms.ModelForm) that you can create like this : from django import forms from ..models.group import Group class GroupForm(forms.ModelForm): class Meta: model = Group fields = ['name', 'is_local'] (sorry for the indentation in comment). I don't know if it is a good idea either anyway. — lbris, Nov 04 '19 at 15:20

Django Form in VueJS component template

2 Answers2

views.py

mytemplate.html