Vue组件:组件的动态添加与删除

一、实现效果

二、实现代码
1.HelloWorld.vue

<template><div class="hello"><child-page v-for="(item,index) in items":key="index":index="index":items="items"@deleteIndex="del"@uploadData="getData"></child-page><button @click="add">Add</button></div>
</template><script>
import ChildPage from './ChildPage'
export default {data () {return {items: [{}],dataRec: []}},components: {ChildPage},methods: {//  add studentadd: function () {this.items.push({name: '', age: ''})},// delete studentdel: function (index) {//  not allow to delete the firstif (index !== 0) {this.items.splice(index, 1)console.log('deleted:', JSON.stringify(this.items))}},//  get the data from childgetData: function (val) {let index = val.indexthis.items[index] = val.dataconsole.log('I got the data:', JSON.stringify(this.items))}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.ChildPage.vue

<template><div class="hello"><h1>Component:{{index}}</h1><p>Name:<input type="text" v-model="student.name" placeholder="Please enter name"></p><p>Age:<input type="text" v-model="student.age" placeholder="Please enter age"><button @click="deleteStudent">Delete</button></p></div>
</template><script>
export default {props: {index: {type: Number,required: true},items: {type: Array,default: Array}},data () {return {student: {name: '',age: ''}}},watch: {student: {handler (newV, oldV) {// if (newV.name.length === 0) {//   return false// }// if (newV.age.length === 0) {//   return false// }this.$emit('uploadData', {index: this.index, data: newV})},deep: true},items: {handler (newV, oldV) {if (newV.length !== 0) {this.student = {...newV[this.index]}}},deep: true}},methods: {deleteStudent: function () {this.$emit('deleteIndex', this.index)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

注意事项：必须用items，不知道什么原因

Vue组件:组件的动态添加与删除相关推荐

vue根据索引删除数组中的一个对象_Vue实现动态添加或者删除对象和对象数组的操作方法...
添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], va ...
后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块一.总结一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
vue 在v-for列表动态添加ref，并获取对应元素
vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）
前言学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看:(汤姆大叔的博客) http://www.cnblogs.c ...
js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素一.总结一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
如何动态添加修改删除定时任务
如何动态添加修改删除定时任务 (1)思路说明: (a)首先这里我们需要重新认识一个类ThreadPoolTaskScheduler:线程池任务调度类,能够开启线程池进行任务调度. (b)ThreadP ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
ViewPager+Fragment实现TabHost，Fragment动态添加、删除，Tab选项卡跟随滑动
效果图: 代码功能: (1)用ViewPager+Fragment实现TabHost,ViewPager的每一个Page均是Fragment.ViewPager中的Fragment可以动态添加.删除. ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...

Vue组件:组件的动态添加与删除

Vue组件:组件的动态添加与删除相关推荐

最新文章

热门文章