0
Before I was having trouble getting the project to see the Vue file as you can see in this post:
I need to make my Javascript file see the Vue and Axios files
He was like this :
And now it’s like this, it’s been fixed:
The change was to put the Axios and Vue file in the root of the lib folder and put the two imports as you can see below;
window.Vue = require('vue');
window.Axios = require('axios');
var crud = new Vue({
el: '#crud',
created: function() {
this.getRegistros();
},
data: {...
But it only connected the Vue file and left Axios without connecting, why am I saying this? Because who makes submit the fomulários and save the files in the bank is the Axios and the system is misbehaving again, I’ll explain:
Before anything I will show my app.js file that has all the methods:
window.Vue = require('vue');
window.Axios = require('axios');
var crud = new Vue({
el: '#crud',
created: function() {
this.getRegistros();
},
data: {
registros: [],
newDesc: '',
newPreco: '',
newQtdQuartos: '',
newTipo: '',
newFinalidade: '',
newLogradouroEndereco: '',
newBairroEndereco: '',
preencherRegistro: {
'id': '',
'descricao': '',
'preco': '',
'qtdQuartos': '',
tipos: '' ,// acho que meu problema está aqui******
'finalidade': '',// acho que meu problema está aqui******
'logradouroEndereco': '',
'bairroEndereco': ''
},
errors: []
},
methods: {
getRegistros: function() {
var urlRegistro = 'imovels';
axios.get(urlRegistro).then(response => {
this.registros = response.data
});
},
editarRegistro: function(registro) {
/* alert(registro.tipos); */
this.preencherRegistro.id = registro.id;
this.preencherRegistro.descricao = registro.descricao;
this.preencherRegistro.preco = registro.preco;
this.preencherRegistro.qtdQuartos = registro.qtdQuartos;
this.preencherRegistro.tipos = registro.tipos;
this.preencherRegistro.finalidade = registro.finalidade;
this.preencherRegistro.logradouroEndereco = registro.logradouroEndereco;
this.preencherRegistro.bairroEndereco = registro.bairroEndereco;
$('#edit').modal('show');
},
updateRegistro: function(id) {
var url = 'imovels/' + id;
axios.put(url, this.preencherRegistro).then(response => {
this.getRegistros();
this.preencherRegistro = { 'id': '',
'descricao': '',
'preco': '',
'qtdQuartos': '',
tipos: '' ,
'finalidade': '',
'logradouroEndereco': '',
'bairroEndereco': '' };
this.errors = [];
$('#edit').modal('hide');
toastr.success('Tarea actualizada con éxito');
}).catch(error => {
this.errors = 'Corrija para poder editar con éxito'
});
},
createRegistro: function() {
var url = 'imovels';
axios.post(url, {
descricao: this.newDesc,
preco: this.newPreco,
qtdQuartos: this.newQtdQuartos,
tipos: this.newTipo,
finalidade: this.newFinalidade,
logradouroEndereco: this.newLogradouroEndereco,
bairroEndereco: this.newBairroEndereco
}).then(response => {
this.getRegistros();
this.newDesc = '';
this.newPreco = '';
this.newQtdQuartos = '';
this.newTipo = '';
this.newFinalidade = '';
this.newLogradouroEndereco = '';
this.newBairroEndereco = '';
this.errors = [];
$('#create').modal('hide');// efetuar a execução
toastr.success('Novo imóvel criado com sucesso!');
}).catch(error => {
this.errors = error.response.data
});
},
deletarRegistro: function(registro) {
var url = 'imovels/' + registro.id;
axios.delete(url).then(response => {
this.getRegistros();
toastr.success('Registro excluído com sucesso');
});
}
}
});
/*
var url = 'imovels';
axios.delete(url).then(response => {
this.getRegistros();
toastr.success('Egistro excluído');
});
*/
When I click the button New property she appears these forms below:
When this template is filled it does not save the record, and when I will inspect the page it shows error 500 as internal URL error immovels
On my local computer works normally, the method that save the records is called createRegister , you are able to view it in the app.js file and in the form as you can see below;
<form method="POST" v-on:submit.prevent="createRegistro">
@section('content')
@if($errors->any())
<div class="alert alert-danger" role="alert">
@foreach ($errors->all() as $error)
{{ $error }}<br>
@endforeach
</div>
@endif
<div class="modal fade" id="create" tabindex="2" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>&time;</span>
</button>
<h4>Novo Imóvel</h4>
</div>
<div class="modal-body">
<label for="descricao">Criar Imóvel</label>
<input type="text" name="descricao"placeholder="Descrição do imóvel" class="form-control" v-model="newDesc" required>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="preco">Preço</label>
<input type="text" class="form-control" placeholder="Preço" name="preco" v-model="newPreco" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="qtdQuartos">Quantidade de Quartos</label>
<input type="number" class="form-control" placeholder="Quantidade de Quartos" name="qtdQuartos" v-model="newQtdQuartos" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tipos">Tipo do Imóvel</label>
<select class="form-control" name="tipos" v-model="newTipo" required>
<option selected>Apartamento</option>
<option>Casa</option>
<option>Kitnet</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="finalidade">Finalidade do imóvel</label>
<select class="form-control" name="finalidade" v-model="newFinalidade" required>
<option>Venda</option>
<option>Locação</option>
</select>
</div>
<span v-for="error in errors" class="text-danger">@{{ error }}</span>
</div>
</div>
<h4>Endereço</h4>
<hr>
<div class="form-group">
<label for="logradouroEndereco">Logradouro</label>
<input type="text" class="form-control" placeholder="Logradouro" name="logradouroEndereco" v-model="newLogradouroEndereco" required>
</div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<label for="bairroEndereco">Bairro</label>
<input type="text" class="form-control" placeholder="Bairro" name="bairroEndereco" v-model="newBairroEndereco" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Salvar">
</div>
</div>
</div>
</div>
</form>
Again I strongly believe that the problem is configuration of Axios because on my local computer work normally, I need to know what exactly to change in the project for the Axios to be viewed.
=========================================================
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Imovel;
class ImovelController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$imovels = Imovel::get();
return $imovels;
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'descricao' => 'required'
]);
Imovel::create($request->all());
return;
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$imovel = Imovel::findOrFail($id);
return $imovel;
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$this->validate($request, [
'descricao' => 'required',
]);
Imovel::find($id)->update($request->all());
return;
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$imovel = Imovel::findOrFail($id);
$imovel->delete();
}
}
This is the URL of my page http://laravel-vue-axios.herokuapp.com/
– wladyband
for those who want to see my repository is this project: https://github.com/wladyband/projectodevmedia/blob/master/package.json
– wladyband
Hello wladyband error 500 is usually related to an internal error in the execution of the script, in general error of syntax missing a semicolon or call a function that does not exist, gives a check in the controller or put here for us to see. You can also test the URL by passing the parameters with Postman.
– Marcos da Cruz Sibilio Jr.
I just updated the controller, but I’m pretty sure it’s not the controller.
– wladyband