CODEWITHSUNDEEP
javascripthtmlvue.js
Zeor137
Zeor137

Reputation: 195

Vue not working correctly with the html (refreshing when I press a button when it isn't supposed to)

I am having a problem where my vue doesn't work correctly.When I press the button it clears out the input(it shouldn't) and does nothing.The variables codigo and payload do not show anything in the screen. Even when I change them via console. It first was having the issue where the 'app' tag wasn't being found by the script even with it on the bottom. To solve it I had to add the line Vue.config.silent=true which made the warning disappear but the code still doesn't work. I am new to vue and web design so expect basic mistakes. I am running it in the 'node' docker image container.

    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Vue test</title>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" ></script >
    <script>
    Vue.config.silent = true;
    </script>
    <body>
    
    <h2>Manipulador de Recursos</h2>
    
    <br>
    
    <div id='app'>
      <form>
        URL do Recurso: <input type="text" v-model="recurso" size=50><br><br>
        Repr. do Recurso: <input type="text" v-model="repr" size=100><br><br>
        Metodo HTTP: &nbsp; 
        <button v-on:click="doGet">GET</button> &nbsp;
        <button v-on:click="doPost">POST</button> &nbsp;
        <button v-on:click="doPut">PUT</button> &nbsp;
        <button v-on:click="doDelete">DELETE</button> <br><br><br>
      </form>
        <b>Retorno:</b><br><br>
        Codigo HTTP: <span v-bind:id="codigo"></span>
        <br><br>
        Payload: <span v-html="payload"></span>
    </div>
    
    </body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script defer >
    var myapp = new Vue({
    el: "app",
    data: {
    "codigo":"",
    "payload":"",
    },
 methods:{   
      // GET
      "doGet" : function() {
         console.log("GET")
         this.clear();
         var url = this.recurso;
         axios
        .get(url)
        .then(function (response) {
                this.codigo = response;
                this.payload =response.data ;
            console.log (response);
        })
        .catch(function (error){
                this.codigo = error;
        })
      },
    
      // POST
      doPost : function() {
         console.log("POST")
         this.clear();
         var url = this.recurso;
         var data = this.repr;
         axios
        .post(url, data)
        .then((response) => {
                this.codigo = response;
                this.payload =response.data ;
            console.log(response)
        })
        .catch((error) => {
                this.codigo = error;
        })
          },
    
    //(...)
    
    }
    
      })
    </script> 
    
    </html>

Upvotes: 2

Views: 939

Answers (3)

Zeor137
Zeor137

Reputation: 195

This solved it Simple vue app doesn't show anything :

Because you didn't render anything in your root component.

In your index.html, render the app component:

<div id="app"> <app> <!-- html code, buttons etc--> </app> </div>

Adding the tags.

Along with this: adding type="button" to the buttons because since they where inside a forms they refreshed the page.

And finally I added:

document.addEventListener("DOMContentLoaded", function(event) {

Around my var myapp = new Vue({

Upvotes: 0

innerurge1
innerurge1

Reputation: 728

You don't want to prevent the click action, as suggested above, but the submit action of the form.

<form @submit.prevent="doGet()">
  <!-- form stuff -->
</form>

Upvotes: 1

Mik
Mik

Reputation: 385

At first, your methods must be inside methods property:

var myapp = new Vue({
    //.......
    data: {
        codigo: "",
        payload: ""
    },
    methods: {
        doGet: function() { /*.......*/},
        doPost: function() { /*.......*/}
    }
})

and in this example your buttons can do default action (the form sending) so it may be necessary: v-on:click.prevent="doGet()".

Upvotes: 0

Related Questions