在我的ProductCard组件中，我需要能够使用addItem方法创建一个新项，它似乎没有加载数组中的项。
<template>
<div class="card">
<div v-for="item in TodoItems" :key="item.id">
<TodoItem :item="item"></TodoItem>
</div>
<form>
<input type="text" v-model="newItemText">
<button type="submit" v-on:click="addItem">Submit</button>
</form>
</div>
</template>
<script async>
import TodoItem from "@/components/TodoItem.vue";
export default {
name: "ProductCard",
//hierin defineren we globale variabelen
components: {TodoItem},
//in data moeten we altijd iets returnen
data(){
return{
//hierin defineren we alle variabelen die we binnen ons component lokaal gaan gebruiken
TodoItems: [],
newItemText: '',
}
},
methods: {
addItem() {
// create a new item object and push it to the array
const newItem = {
id: this.TodoItems.length,
text: this.newItemText,
completed: false
}
this.TodoItems.push(newItem);
console.log('zit er in');
console.log(this.TodoItems.length);
// clear the input field
this.newItemText = '';
},
}
}
</script>
1条答案
按热度按时间3pvhb19x1#
默认情况下，当用户点击表单中的type=“submit”按钮（或者当表单字段被聚焦时，甚至只是按Enter）时，表单将被提交，页面将被重新加载。这就是为什么你看不到添加的元素，页面在每次添加后都会重新加载。
有几种方法可以防止这种行为：
第一种方式-在“v-on：click”指令中添加“.prevent”修饰符
它允许通过点击“提交”按钮并按Enter键来添加项目。
第二种方式-处理form元素中带有.prevent修饰符的submit事件，并从button元素中删除v-on：click指令。按钮必须为type=“submit”。
它还允许通过单击“提交”按钮并按Enter键来添加项目。
第三种方式-将按钮类型改为“button”并使用“.prevent”修饰符处理表单的submit事件（如果不处理此事件，则按Enter键时页面将重新加载）
它也将工作，但只有当用户单击提交按钮。回车键不会这样工作。
我建议选择第一种或第二种方式。
仅供参考：“.prevent”修饰符只是event.preventDefault（）的语法糖;
你可以检查完整的代码，并尝试在这里-https://codepen.io/AlekseiKrivo/pen/BaqwMQo
你可以在这里阅读更多-https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
关于preventDefault-https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault