Question

我目前正在启动一个项目，其中我在后端使用Django，在API中使用graphql（Graphene），在前端使用VueJS，在{{3 }}可以简化通过VueJS运行graphql查询的过程。

问题是：我已经能够在Vue组件中执行自定义表单，并运行适当的查询以获取/添加/删除数据。但是到目前为止，我还无法将Django Forms集成到Vue组件中，我不知道该怎么做。我对自定义表单可能会感到满意，但是我无法使用Django表单，因为对表单的所有验证都很容易在Django中完成。

任何帮助将不胜感激。

预先感谢

lbris。

Answer 1

这是this文章中的代码片段，建议您阅读。

您必须将视图实例附加到某些元素，例如开始（例如）
设置分隔符，因为我们不需要与Django模板{{}}语法冲突
在id = 开始的div内，您可以放置vue自定义表单

<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>

Answer 2

对于使用djagno widget tweaks

的问题，我找到了一种非常干净的解决方案

有了它，您可以拥有类似的东西：

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>

它将完美运行

VueJS组件模板中的Django表单

2 个答案:

views.py

mytemplate.html