Vue实时刷新数组

Vue实时刷新数组

1.第一种，直接拼接数组

<template>
	<div style="border: 1px solid #ccc; width: 500px;height:200px; margin: auto;">
		<div>
			<button @click="addItem" style="float: right;" >添加新的项</button>
		    <input type="text" :value="title"/>
		</div>
		<ul v-model="oldList">
			<li v-for="(item,index) in oldList">{{item.text}}</li>

			
		</ul>
		
	</div>
</template>

<script>
	import son from '@/views/son.vue'
	export default{
		components:{
			son,
		},
		data(){
			return {
				title:"",
				oldList:[
					{
						text:"第一项"
					},
					{
						text:"第二项"
					},
					{
						text:"第三项"                 
					},
				],
				addList:[{
					text:"第4项"              
				},],
				// push方法，addList要这样写
				// addList: {
				// 	text: "第4项",
				// 	add:"44"
				// }
			}
		},
		methods:{
		//concat()方法
			addItem(){
				const self = this
				self.oldList =self.oldList.concat(self.addList)			
			}
			// // push方法
			// addItem() {
			// 	const self = this
			// 	 self.oldList.push(self.addList)
			// 	 console.log(self.oldList)
			// }
		
		}
	}
</script>

2.第二种，直接重新查询

例如添加评论，在添加评论的点击事件中，直接调用查询评论的方法，实现刷新。