Vue does not work with ajax

Asked

Viewed 234 times

-2

I’m new to Vue and I made a simple code:

var appCtrlUsuario = new Vue({
el: '#appCtrlUsuario',
data: {
    Nome: '',
    Email: '',
    Cond: '',
    Type: [{ id: 1, name: 'Morador' },
    { id: 2, name: 'Síndico - Rensponsável' },
    { id: 3, name: 'Administradora - Rensponsável' },
    { id: 4, name: 'Zelador – Rensponsável' },
    ],
    select: null
},
methods: {
    cadastrar: function () {
        var data = {
            "UserCondominio": this.Cond,
            "UserEmail": this.Email,
            "UserName": this.Nome,
            "UserType": this.select
        };

        $.ajax({
            url: "http://localhost:51541/Api.svc/cadastro-usuario",

            data: data,
            type: 'POST',
            success: function (result) {
                Swal.fire({
                    type: 'success',
                    title: 'Sucesso!',
                    text: 'Adicionado!'
                });
            },
            error: function (xhr, status, error) {
                Swal.fire({
                    type: 'error',
                    title: 'Erro!',
                    text: this.statusText
                });
            }
        });
    }
}
 });

When I click with empty Forms falls into error in the ajax and appears the Sweet Alert appears, but when I fill with data the page flashes and the models are reset and the ajax never returns. Here is the html:

<!DOCTYPE html>
  <html>
  <head>
      <title>Cadastro de Usuário</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
​
      <header class="w3-container w3-teal">
          <h1>Cadastro de Usuario</h1>
      </header>
      <div class="w3-container w3-half w3-margin-top" id="appCtrlUsuario">
    ​
          <form class="w3-container w3-card-4">
        <p>
            <input v-model="Nome" class="w3-input" type="text" style="width:90%" required>
            <label>Nome</label>
        </p>
        <p>
            <input v-model="Email" class="w3-input" type="text" style="width:90%" required>
            <label>Email</label>
        </p>
        <p>
            <input v-model="Cond" class="w3-input" type="text" style="width:90%" required>
            <label>Condomínio</label>
        </p>
        <p>
            <label>Tipo</label>
            <select v-model="select">
                <option v-for="item in Type" :value="item.id">{{item.name}}</option>
            </select>
        </p>
        ​ ​ ​
        <p>
            <button v-on:click="cadastrar" class="w3-button w3-section w3-teal w3-ripple"> Cadastrar </button>
        </p>
        ​
          </form>
    ​
      </div>
<script src="scripts/controller.js"></script>​

  </body>
  </html>

Someone knows what’s wrong?

javascript ajax vue.js
  • 1

    What does tab say network browser programmer tools (devtools)?

  • But because you use jQuery to make http request with Vue, why use jQuery with Vue?? You can use Axios which is much more suitable for this: https://github.com/axios/axios

  • I was actually using pure Xmlhttprequest and having this problem, so I thought I’d use jquery. I haven’t tried Next yet. As for the network error is: none!! Nothing appears on the console, nothing appears on the network!!

1 answer

0

Until it does, but it will take a lot of work, use Axios which is a JS library to make ajax requests

axios.post('http://localhost:51541/Api.svc/cadastro-usuario', data)
.then(function(response){
  //caso dê certo
}).catch(function(error){
  //caso dê errado
})

  • I used Axios but nothing. I switched Vue for knockout and went. The strange thing is that nothing appears on the console or in the browser’s network tab. Finally my problem was solved by changing the javascript framework.

Browser other questions tagged javascript ajax vue.js

You are not signed in. Login or sign up in order to post.