Форма Django в шаблоне компонента VueJS - PullRequest
Новая
       31

Форма Django в шаблоне компонента VueJS

0 голосов
/ 04 ноября 2019

Я сейчас запускаю проект, в котором я использую Django для бэкенда, graphql ( Графен ) для API, VueJS длявеб-интерфейс и Vue Apollo для упрощения выполнения запросов graphql через VueJS.

Дело в том, что я уже могу создавать пользовательские формы в компонентах Vue и запускать соответствующий запрос для извлечения / добавления/ удалить данные. Но я до сих пор не смог интегрировать Django Forms в компонент Vue, я понятия не имею, как это сделать. Я мог бы быть доволен пользовательскими формами, но я не смог бы использовать формы Django, так как с Django можно легко проверить все формы.

Любая помощь будет оценена.

Заранее спасибо,

Ибрис.

1 Ответ

0 голосов
/ 04 ноября 2019

Это фрагмент кода из этой статьи, я рекомендую вам прочитать его.

  • вам необходимо прикрепить экземпляр вида к какому-либо элементу, например начиная с (в примере)
  • set delimiters , потому что нам не нужны конфликты с {{}} синтаксисом шаблона django
  • внутри div с id = начиная с Вы можете разместить свои собственные пользовательские формы 
<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>
...