Vue не работает корректно с html (обновляется, когда я нажимаю кнопку, когда она не должна)


Vue не работает корректно с html (обновляется, когда я нажимаю кнопку, когда она не должна)

27.10.2020 08:11:52 Просмотров 52 Источник

У меня возникла проблема, когда мой vue работает неправильно.Когда я нажимаю кнопку, она очищает вход (этого не должно быть) и ничего не делает.Переменные codigo и полезная нагрузка ничего не показывают на экране. Даже когда я меняю их через консоль. Сначала у него была проблема, когда тег " app " не был найден сценарием даже с ним внизу. Чтобы решить эту проблему, мне пришлось добавить строку Vue.config.silent=true, которая заставила предупреждение исчезнуть, но код по-прежнему не работает. Я новичок в vue и веб-дизайне, поэтому ожидаю основных ошибок. Я запускаю его в контейнере изображений docker' node'.

    <!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>
У вопроса есть решение - Посмотреть?

Ответы - Vue не работает корректно с html (обновляется, когда я нажимаю кнопку, когда она не должна) / Vue not working correctly with the html (refreshing when I press a button when it isn't supposed to)

Mik

27.10.2020 08:53:50

Во-первых, ваши методы должны находиться внутри свойства methods:

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

и в этом примере ваши кнопки могут выполнять действие по умолчанию (отправка формы), так что это может быть необходимо: v-on:click.prevent="doGet()".

Zeor137

27.10.2020 09:21:12

Это решило все просто приложение vue ничего не показывает :

Потому что вы ничего не визуализировали в своем корневом компоненте.

В вашем index.html, рендеринг компонента приложения:

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

Добавление тегов.

Наряду с этим: добавление type= "button" к кнопкам, потому что, поскольку они находятся внутри форм, они обновляют страницу.

И наконец я добавил:

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

Вокруг моего var myapp = new Vue({

innerurge1

27.10.2020 09:32:29

Вы хотите предотвратить не действие щелчка, как было предложено выше, а действие отправки формы.

<form @submit.prevent="doGet()">
  <!-- form stuff -->
</form>
Помочь в развитии проекта:
Закрыть X