1
I managed to implement the edit button, by clicking the button it will load all the records that exist in a database in a folder, I can load all fields except the selects.
The problem is I’m not sure how to load the select Vuejs
It gives this error message on browser consoles saying that I have not declared the variable guys
[Vue warn]: Property or method "tipos" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)
warn @ vue.js:577
But they are stated in the code snippet below and not forgetting to point out that it is the same variable that I am using to save the guys is is working.
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) {
this.preencherRegistro.id = registro.id;
this.preencherRegistro.descricao = registro.descricao;
this.preencherRegistro.preco = registro.preco;
this.preencherRegistro.qtdQuartos = registro.qtdQuartos;
this.preencherRegistro.tipos = registro.tipo;
this.preencherRegistro.finalidade = registro.finalidade;
this.preencherRegistro.logradouroEndereco = registro.logradouroEndereco;
this.preencherRegistro.bairroEndereco = registro.bairroEndereco;
$('#edit').modal('show');
},
updateRegistro: function(id) {
alert('editando o registro');
},
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');
});
}
}
});
I think the problem is here at the time to mount the select, I’ve tried several ways;
<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" id="select-tipo" v-model="preencherRegistro.tipos">
<option v-for="tipo in tipos" :value="tipo">@{{ tipos }}</option>
</select>
<span v-for="error in errors" class="text-danger">@{{ error }}</span>
</div>
</div>
I accept suggestion. For those who want to see my repository on Github
Inside the Vue Date Object does not have the type variable, hence the error. This property type listing, I saw no place setting these values, which would be?
– Bruno Rigolon
@Brunorigolon I would ask you to take a look at my repository, the link from my repository is in my post, but I will put here >> https://github.com/wladyband/laravel-vue-axios/blob/master/public/lib/app.js I am able to set the variables because I am able to save the objects, in this case the problem is edit, the function to edit the objects is named editingRegister.
– wladyband