Laravel Vuejs конструктор форм

Question

В моем проекте у меня есть несколько событий, каждое с несколькими тегами. Эти теги определяются пользователем-администратором. Некоторые из этих тегов могут иметь параметры. Например, тег электронной почты имеет два параметра «Отправитель» и «Получатель». Или тег передачи имеет 2 параметра «От» и «Кому». и et c. Обязательно ли мне использовать конструктор форм? Как мне реализовать это, используя Laravel и Vuejs?

Answer 1

Используйте Vue JS Компонент в Laravel вот так.

Создайте контакт. vue компонент внутри resources \ assets \ js \ components, затем поместите туда свой Vuejs.

<template>
      <div>
        <h1>Contacts</h1>
        <form action="#" @submit.prevent="createContact()">
          <div class="form-group">
            <label>Name</label>
            <input v-model="contact.name" type="text" name="name" class="form-control">
          </div>
          <div class="form-group">
            <label>Email</label>
            <input v-model="contact.email" type="text" name="email" class="form-control">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">New Contact</button>
          </div>
        </form>
      </div>
    </template>
    <script>
      export default {
        data: function(){
          return {
            contact:{
              name:'',
              email:'',
            }
          }
        },
        methods: {
          createContact: function(){
          //call axios to submit the form values in your Laravel controller method
          let self = this
           axios.post('/contact/store', params)
              .then(function(){
                self.contact.name = '';
                self.contact.email = '';
              })
              .catch(function(error){
                console.log(error);
              });
            console.log(this.contact);
            return;
          }
        }
      }
    </script>

В приложении. js файл внутри \ resources \ assets \ js добавьте компонент

Vue.component('contacts', require('./components/Contacts.vue'));

Наконец, вызовите компонент контактов внутри вашего файла лезвия.

   <div class="container">
      <div id="app">
        <contacts></contacts>
      </div>
    </div>