GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Erro código Vue.js

javascript
Tags: #<Tag:0x00007fbf1b57bf48>

#1

Olá pessoal, estou com um problema em meu código.
Ele dá a seguinte mensagem de erro: vue.js:1705 TypeError: Cannot read property ‘get’ of undefined
Estou usando o lite-server para comunicação front-end e spring-boot para back-end.
Acho que estou fazendo algo de errado nas declarações de métodos.

Abaixo segue o código:

<!doctype html>

<title>Lista de Pacientes</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/vue.js"></script>
Toggle navigation Home
			</div>
    </div>
    
    <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
      <h1>Pacientes</h1>
      <h2>Lista de informações</h2>
    </br>              
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Nome</th>
            <th>Responsável</th>
            <th>Telefone</th>
            <th>Celular</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Jaqueline da Silva</td>
            <td>---</td>
            <td>67 3333-3333</td>
            <td>67 99999-9999</td>
          </tr>
          <tr>
            <td>Pedro Souza</td>
            <td>Marcia Gonçalves</td>
            <td>67 2222-2222</td>
            <td>67 98888-9996</td>
          </tr>
          <tr>
            <td>Mauro Cortana</td>
            <td>---</td>
            <td>67 6666-5555</td>
            <td>67 95555-6666</td>
          </tr>
          <tr>
            <td>Carina Silveira</td>
            <td>Alberto Lima</td>
            <td>65 3222-5555</td>
            <td>65 96665-1111</td>
          </tr>
          <tr>
            <td>Maria da Silva</td>
            <td>---</td>
            <td>---</td>
            <td>67 95556-5555</td>
          </tr>
          <tr>
            <td>Jozé Souza</td>
            <td>Carolina Arruda</td>
            <td>67 3777-8888</td>
            <td>67 93332-4444</td>
          </tr>
          <tr>
        </tbody>
      </table>
      
    <div>
        <div id="app">
          <button type="button" v-on:click="buscarTodos">Buscar</button>
          <ul style="list-style-type: none">
            <li v-for="(paciente,index) in pacientes">
              {{paciente.id}},{{paciente.nome}},{{paciente.cpf}}
            </li>
          </ul>  
        </div>  

        <button type="submit" class="btn btn-primary">Novo Paciente</button>
        <a href="cadastro_paciente.html"></a>
      </div>
    </main>
  </div>
</div>

<script>
    var app = new Vue({
      el: '#app',
      data: {
        pacientes:[],
        nome:"",
        cpf:"",
        rg:"",
        dataNasc:"",
        sexo:"",
        responsavel:"",
        cpfResponsavel:"",
        endereco:"",
        telefone:"",
        celular:"",
        email:"",
        recibo:"false",
        convenio:"",
        validadeConvenio:""
      },
      mounted: function () {
      this.buscarTodos();
      },
      methods: {
      buscarTodos:function(){
        this.$http.get("http://localhost:8080/pacientecontroller")
      .then(function(res){
        this.paciente = res.body;
      }, function (res) {
        console.log(res)
      });
    }
    }
  })

</script>

<footer class="page-footer footer_index">
    <div class="footer-copyright" align="center">
      <div class="container" align="center">OGDP 2017© Copyright - Otávio Oshiro</div>
    </div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('vendor/jquery.min.js"><\/script>')</script>
<script src="vendor/popper.min.js"></script>

Desde já agradeço.


#2

Ola,

Nesse link aqui, o cara passou pelo mesmo problema que você.

Olhe a solução dele e veja se te atende.