3

我目前正在启动一个项目，其中我使用Django作为后端，使用 graphql ( Graphene ) 作为 API，使用 VueJS作为前端，使用Vue Apollo来简化通过 VueJS 运行 graphql 查询。

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

任何帮助，将不胜感激。

提前致谢，

布里斯

4

2 回答 2

2

我找到了一个非常干净的解决方案来使用djagno 小部件调整

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

视图.py

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

我的模板.html

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

它会完美地工作

于 2020-09-08T11:14:03.723 回答
0

这是本文的代码片段，我建议您阅读它。

  • 您必须将视图实例附加到某些元素，例如开始（例如）
  • 设置分隔符，因为我们不需要与 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>
于 2019-11-04T15:02:56.790 回答