1

Eu consegui implementar o botão editar, ao clicar no botão ele vai carregar todos os registros que existem num banco de dados num fomulário, eu conseguir carregar todos os campos exceto os selects.

O problema é que não estou sabendo carregar o select do VueJS

Ele dá essa mensagem de erro no consoles do navegador dizendo que eu não declarei a variável tipos

[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

Mas elas está declarada no trecho de código abaixo e não deixando de salientar que é a mesma variavel que estou usando para salvar o tipos é está funcionando.

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');
                             });
                    }
            }
        });

Eu acho que o problema está aqui na hora de montar o select, já tentei de varias formas;

  <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>

aceito sugestão. Para quem quiser ver meu repositório no Github

2
  • 1
    Dentro do Objeto Data do Vue não possui a variável tipos, por isso o erro. Essa listagem de tipo do imóvel, não vi nenhum lugar setando esses valores, quais seriam? 26/10/2017 às 16:04
  • @BrunoRigolon eu iria solicitar que você desse uma olhada no meu repositório, o link do meu repositório está na minha postagem, mas vou colocar aqui >> github.com/wladyband/laravel-vue-axios/blob/master/public/lib/… Eu estou conseguindo setar as variáveis porque estou conseguindo salvar os objetos, neste caso o problema é editar, a função para editar os objetos está com o nome de editarRegistro.
    – user10264
    26/10/2017 às 16:10

0

Você deve fazer log-in para responder a esta pergunta.