英文:
Vue3 click reloading whole page
问题
这是我在Vue3中的代码。后端是Django。
<template>
<section>
<div class="container py-5">
<div class="row">
<div v-for="item in list" v-bind:key="item.id" class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold text-success mb-2">{{ item.name }}</p>
<h3 class="fw-bold">{{ item.age }}</h3>{{ item.vote }}
<form @submit.prevent="">
<button class="btn" type="button" @click="onClickButtonYes(item.id)">+</button>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
...
async onClickButtonYes(id) {
const fd = new FormData();
fd.append("id", id);
fd.append("isvoted", true);
axios
.put(`/api/v1/voteitem/${id}/`, fd)
.then(response => {
this.latest = response.data
this.getlatestitems()
})
.catch(error => {
console.console.log(error);
})
},
...
</script>
点击按钮后整个页面会重新加载，为什么？
我尝试添加了@submit.prevent=""，并添加了type="button"... 问题出在哪里？我向ChatGPT询问过，他提到了响应式。
英文:
this my code in Vue3. Backend is in Django.
<template>
<section>
<div class="container py-5">
<div class="row">
<div v-for="item in list" v-bind:key="item.id" class="col-md-8
col-xl-6 text-center mx-auto ">
<p class="fw-bold text-success mb-2">{{ item.name }}</p>
<h3 class="fw-bold">{{ item.age }}</h3>{{ item.vote }}
<form @submit.prevent="">
<button class="btn" type="button" @click="onClickButtonYes(item.id)">
+</button>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
...
async onClickButtonYes(id) {
const fd = new FormData();
fd.append("id", id);
fd.append("isvoted", true);
axios
.put(`/api/v1/voteitem/${id}/`, fd)
.then(response => {
this.latest = response.data
this.getlatestitems()
})
.catch(error => {
console.console.log(error);
})
},
}
}
</script>
After click button whole page is reloading, why?
I tired add @submit.prevent="", and also add type=button...
Where is problem? I asked chatgpt.. he say something about reactive.
答案1
得分: 1
这是你发布的代码，我不会为你翻译它，但如果你有任何关于这段代码的问题，我可以帮助你解答。
英文:
The problem is outside the code you have posted.
Here is working playground with your code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { createApp, ref } = Vue
const App = {
setup() {
const list = ref([{ id: 1, name: "One", age: 100 }]);
const onClickButtonYes = (id) => {
console.log(id)
const fd = new FormData();
fd.append("id", id);
fd.append("isvoted", true);
axios
.put(`https://nowhere.com/api/v1/voteitem/${id}/`, fd)
.then(response => {
this.latest = response.data
})
.catch(error => {
console.log(error);
})
}
return {
list, onClickButtonYes
}
}
}
const app = createApp(App)
app.mount('#app')
<!-- language: lang-css -->
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div id="app" v-cloak>
<section>
<div class="container py-5">
<div class="row">
<div v-for="item in list" v-bind:key="item.id" class="col-md-8
col-xl-6 text-center mx-auto ">
<p class="fw-bold text-success mb-2">{{ item.name }}</p>
<h3 class="fw-bold">{{ item.age }}</h3>{{ item.vote }}
<form>
<button class="btn" type="button" @click="onClickButtonYes(item.id)">+</button>
</form>
</div>
</div>
</div>
</section>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论