一、实现效果

二、实现代码

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 student
add: function () {
this.items.push({name: '', age: ''})
},
// delete student
del: function (index) {
// not allow to delete the first
if (index !== 0) {
this.items.splice(index, 1)
console.log('deleted:', JSON.stringify(this.items))
}
},
// get the data from child
getData: function (val) {
let index = val.index
this.items[index] = val.data
console.log('I got the data:', JSON.stringify(this.items))
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

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>

Vue组件:组件的动态添加与删除的更多相关文章

  1. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

  2. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  3. 插件~使用ECharts动态在地图上标识点~动态添加和删除标识点

    之前写过一个Echarts的文章,没有基础的同学可以先看这<上一篇>,对于一个地图和说,我们在初始化之后,你可能被在地图上标识出一些点,当然这根据你的业务去标识,而如果每次更新数据都加载全 ...

  4. [Flex] Accordion系列-动态添加或删除Accordion容器中项目

    <?xml version="1.0" encoding="utf-8"?> <!--Flex中如何使用addChild()和removeCh ...

  5. Unity NGUI中动态添加和删除sprite

    (以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...

  6. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  7. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  8. adoop集群动态添加和删除节点

    hadoop集群动态添加和删除节点说明 上篇博客我已经安装了Hadoop集群(hadoop集群的安装步骤和配置),现在写这个博客我将在之前的基础上进行节点的添加的删除. 首先将启动四台机器(一主三从) ...

  9. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  10. SpringBoot定时任务升级篇(动态添加修改删除定时任务)

    需求缘起:在发布了<Spring Boot定时任务升级篇>之后得到不少反馈,其中有一个反馈就是如何动态添加修改删除定时任务?那么我们一起看看具体怎么实现,先看下本节大纲: (1)思路说明: ...

随机推荐

  1. [转]JFreeChart简介及下载、配置

    JFreeChart简介 JFreeChart是完全基于Java语言的开源项目,因此可以使用在Java开发环境中,包括Java应用程序,或者是Java Web应用都没有任何问题.结合iText项目,可 ...

  2. opencv2.4.10+VS2012配置问题

    opencv2.4.10+VS2012配置 作为opencv的初学者,第一个难题想必都一样,如何配置opencv+VS的环境呢?在网上的教程,铺天盖地,但我仍然是尝试了十几次才找到属于自己的那套配置方 ...

  3. 获取当前的日期时间的js函数,格式为“yyyy-MM-dd hh:mm:ss”

    //获取当前的日期时间函数,格式为“yyyy-MM-dd hh:mm:ss” function getNowFormatDate(date) { if (date == null) { var dat ...

  4. java集合框架(二):HashTable

    HashTable作为集合框架中的一员,现在是很少使用了,一般都是在面试中会问到其与HashMap的区别.为了能在求职的时候用上场,我们有必要对其原理进行解读. HashTable的实现原理跟Hash ...

  5. mysql 乱码问题的捣鼓

    mysql在ubuntu的终端下出现中文乱码的问题: 先学着在不改数据库的情况下对my.cnf配置文件进行修改, 主要的是设置 default-character-set=utf8 但是设置完后数据库 ...

  6. Iscrool下拉刷新

    简易下拉刷新 css样式: *{ margin: 0px; padding: 0px; } #wrapper{ width: 100%; height: 150px; border: 1px soli ...

  7. IS Decisions如何帮助企业提高安全标准

    PCI DSS标准有什么要求? 简单地说,PCI DSS要求最高级别的网络安全性.这一标准如今广泛应用于需要存储.管理.传输客户(或持卡人)个人数据的行业和领域. 施行严格的访问监控措施 为了保证关键 ...

  8. 使用 profile 进行python代码性能分析

    定位程序性能瓶颈 对代码优化的前提是需要了解性能瓶颈在什么地方,程序运行的主要时间是消耗在哪里,对于比较复杂的代码可以借助一些工具来定位,python 内置了丰富的性能分析工具,如 profile,c ...

  9. ul标签在FF中默认只有padding值(即:padding-left:40px)

  10. 查询python的安装路径

    参考链接: https://blog.csdn.net/orangleliu/article/details/44907221 (tf_14) novak@novak-ZBook15G2:~$ pyt ...