Соберите данные из формы, поместите в объект и отправьте их с помощью ajax в проекте Vue

Question

Попытка собрать все данные HTML из моей формы, затем сохранить их как объект и затем отправить их с помощью ajax-запроса. Есть идеи, пожалуйста? Ценю некоторую помощь. Я пробовал с jquery сериализации, но прочитать это таким образом не может быть отправлено (на URL API, без PHP) с помощью ajax (post).

    <form class="form" action="" method="" id="createProposal">
        <div class="form-group">
            <label class="col-md-12 control-label" for="asset-drop">Asset</label>
            <div class="col-md-12">
                <select id="asset-drop" name="asset-drop" class="form-control" >
                                    <option value="1"> {{ this.assets[0] ? this.assets[0].name : '' }} </option>
                                    <option value="2">{{ this.assets[1] ? this.assets[1].name : '' }}</option>
                                    <option value="3">{{ this.assets[2] ? this.assets[2].name : '' }}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-12 control-label" for="amount-invest">Amount</label>
            <div class="col-md-12">
                <input id="amount-invest" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12 control-label" for="description-input">Description</label>
            <div class="col-md-12">
                <textarea class="form-control" id="description-input" name="description-input"></textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
            <button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
        </div>
    </form>

Answer 1

Я предлагаю создать объект в разделе данных, который вы называете proposal, и связать вашу форму с этим объектом, используя v-model, я использую один файловый компонент, но это не имеет значения, вы можете подойти к этому решению на ваш случай:

<template>
    <form class="form" action="" method="" id="createProposal">
        <div class="form-group">
            <label class="col-md-12 control-label" for="asset-drop">Asset</label>
            <div class="col-md-12">
                <select id="asset-drop" name="asset-drop" class="form-control" v-model="proposal.selectedAsset" >
                                    <option :value="index" :key="index" v-for="(asset,index) in proposal.assets">{{asset}}  </option>
                                  
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-12 control-label" for="amount-invest">Amount</label>
            <div class="col-md-12">
                <input id="amount-invest" v-model="proposal.amount" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12 control-label" for="description-input">Description</label>
            <div class="col-md-12">
                <textarea class="form-control"  v-model="proposal.description" id="description-input" name="description-input"></textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
            <button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
        </div>
    </form>
</template>

<script>
export default {
  data(){
    return{
      proposal:{
        assets:[],
        selectedAsset:'',
        amount:'',
        description:''
      }
    }
  },
  methods:{
    hideCreatePropolsal(){

    },
    formDataCreation(){
      /*   $.ajax({
                url: "yourUrl",
                type: "POST",
                data:this.proposal,
                success: function (response) {
                 
                }});*/
    }
  }
};
</script>

<style>
</style>

Вы можете проверить весь код