Tengo un formulario que permite a los usuarios ingresar múltiples entradas de un mismo campo, por lo que configuro el valor como una matriz, pero no puedo enviar el formulario correctamente.
Error 1 : el valor siempre será 'indefinido', creo que se debe a que la forma en que configuré la matriz es incorrecta.
Error 2 : el sistema solo puede obtener 1 resultado aunque envíe varias entradas.
Solo muestro el código que configuré en la matriz y cómo enviarlo y no todo el ajax porque será demasiado código para mostrar.
HTML:
<div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index"> <label class="col-sm-3 col-form-label">Domain</label> <div class="col-sm-9" > <input type="text" align="middle" v-model="input.addDomain" class="form-control input-lg"> <a @click="addField()"><i class="fa fa-plus-circle" ></i></a> <a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a> </div> </div> <button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button>vistas:
<script> export default { data() { return { addDomain: [{domain:""}], }, methods : { addCompanySetting(){ var VUE = this var postExtraData = ''; var input = _.findIndex(this.addDomain.data, { 'domain': this.input.domain }); var postData = '&domain='+this.addDomain[input]'; var valid = this.validator();//validation to check the input is not empty if(valid){ $.ajax({ url:baseUrl+'/agency/account/prefer-ma', type: 'POST', data: postData, dataType: 'json' }).done(function (data){ if(data.result == "1"){ VUE.inputAddPrefix = '-'; VUE.addDomain = null; $('#addApiSettingModal').modal('toggle'); } }, }, addField() { this.addDomain.push({domain:""}); }, removeField(index) { this.addDomain.splice(index, 1); }, },He refactorizado su código y lo he mejorado un poco, he creado un espacio aislado funcional para usted. Enlace de la caja de arena
<template> <div id="app"> <div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index" > <label class="col-sm-3 col-form-label">Domain</label> <div class="col-sm-9"> <input type="text" align="middle" v-model="input.domain" class="form-control" /> <a @click="addField()" class="btn btn-info" ><i class="fa fa-plus-circle"></i ></a> <a @click="removeField(index)" class="btn btn-danger" ><i class="fa fa-minus" style="color: white"></i ></a> </div> </div> <button type="button" class="btn btn-success btn-submit" @click="addCompanySetting" > submit </button> </div> </template> <script> import axios from "axios"; export default { name: "App", data() { return { addDomain: [{ domain: "" }], baseUrl: "", }; }, methods: { addCompanySetting() { console.log(this.addDomain); axios .post(this.baseUrl + "/agency/account/prefer-ma", this.addDomain) .then((response) => { if (response.data.result === "1") { this.inputAddPrefix = "-"; this.addDomain = null; $("#addApiSettingModal").modal("toggle"); } }); }, addField() { this.addDomain.push({ domain: "" }); }, removeField(index) { this.addDomain.splice(index, 1); }, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Observaciones :
addDomain en su objeto de input . Por lo tanto, debería ser v-model="input.domain" en lugar de v-model="input.addDomain" .addDomain es una matriz. No tiene ninguna propiedad de data en addDomain.input en nuestros datos. Por lo tanto, this.input.domain devolverá indefinido.Demostración de trabajo:
new Vue({ el: "#app", data: { addDomain: [{ domain: 'www.abc.com' }, { domain: 'www.def.com' }, { domain: 'www.ghi.com' }, { domain: 'www.jkl.com' }, { domain: 'www.mno.com' }] }, methods: { addCompanySetting() { // Add your logic here console.log('input domains', this.addDomain); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index"> <label class="col-sm-3 col-form-label">Domain</label> <div class="col-sm-9"> <input type="text" align="middle" v-model="input.domain" class="form-control input-lg"/> <a @click="addField()"><i class="fa fa-plus-circle" ></i></a> <a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a> </div> </div> <button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button> </div>