Estaba necesitado autogenerar inputs dinamicamente y me encontré con este tutorial que me pareció simple y funciona bien. https://smarttutorials.net/dynamically-add-or-remove-input-textbox-using-vuejs/
El problema es que necesito guardar los datos en la base de datos y tengo varias trabas.
La primera es que uso la ultima versión de xampp con phpmyadmin y no encuentro el tipo de dato json. Sé que está integrado ese tipo de dato en las nuevas versiones. No sé por que no aparece en la mia.
Igualmente buscando en google encontré que se puede usar longtext en su reemplazo pero me da error.
Si son tan amables me pueden indicar si lo estoy trabajando bien o me falta modificar algo.
Migración
public function up()
{
Schema::create('mails', function (Blueprint $table) {
$table->bigIncrements('id');
$table->bigInteger('usuario_id')->unsigned();
$table->longtext('mails');
$table->timestamps();
$table->foreign('usuario_id')->references('id')->on('usuarios')
->onDelete('cascade')
->onUpdate('cascade');
});
}
Vista inputs
<form method="post" v-on:submit.prevent="EnviarEmails">
<!-- Heading -->
<h3 class="dark-grey-text text-center mt-4">
<strong>Cuentas:</strong>
</h3>
<hr>
<div class="form-group" v-for="(input,k) in inputs" :key="k">
<input type="text" class="form-control" v-model="input.name">
<span>
<i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)"></i>
<i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1"></i>
</span>
</div>
<div class="text-center">
<button class="btn btn-indigo">Enviar</button>
{{-- <button class="btn btn-indigo" @click="EnviarEmails">Enviar</button> --}}
<hr>
</div>
Métodos vue
add: function(index) {
this.inputs.push({ name: '' });
},
remove: function(index) {
this.inputs.splice(index, 1);
},
EnviarEmails: function(){
var url = '/mailsEnviados';
axios.post(url, {my_prop_name :JSON.stringify(this.inputs)
}).then(response => {
}).catch(error => {
});
},
Controller
public function store(Request $request)
{
// foreach(json_decode($request->input('my_prop_name ')) as $my_object_in_array)
// {
// print_r($my_object_in_array);
// }
$mails = new Mails();
$mails->usuario_id = 1;
$mails->mails = $request->all();
$mails->save();
return true;
}
La vista donde mostrar los datos
@foreach($datos as $usuario)
<tr>
<td>{{$i++}}</td>
<td>{{ $usuario->usuario_id }}</td>
<td>{{ json_decode($usuario->mails) }}</td>
<td>{{ $usuario->created_at}}</td>
</tr>
@endforeach
Agradezco mucho su tiempo invertido en mi consulta. Saludos