Vue не работает корректно с html (обновляется, когда я нажимаю кнопку, когда она не должна)
У меня возникла проблема, когда мой 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:
<button v-on:click="doGet">GET</button>
<button v-on:click="doPost">POST</button>
<button v-on:click="doPut">PUT</button>
<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)
27.10.2020 08:53:50
Во-первых, ваши методы должны находиться внутри свойства methods:
var myapp = new Vue({
//.......
data: {
codigo: "",
payload: ""
},
methods: {
doGet: function() { /*.......*/},
doPost: function() { /*.......*/}
}
})
и в этом примере ваши кнопки могут выполнять действие по умолчанию (отправка формы), так что это может быть необходимо: v-on:click.prevent="doGet()".
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({
27.10.2020 09:32:29
Вы хотите предотвратить не действие щелчка, как было предложено выше, а действие отправки формы.
<form @submit.prevent="doGet()">
<!-- form stuff -->
</form>