Vue组件:组件的动态添加与删除
一、实现效果
二、实现代码
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组件:组件的动态添加与删除的更多相关文章
- vue组件上动态添加和删除属性
1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
- 插件~使用ECharts动态在地图上标识点~动态添加和删除标识点
之前写过一个Echarts的文章,没有基础的同学可以先看这<上一篇>,对于一个地图和说,我们在初始化之后,你可能被在地图上标识出一些点,当然这根据你的业务去标识,而如果每次更新数据都加载全 ...
- [Flex] Accordion系列-动态添加或删除Accordion容器中项目
<?xml version="1.0" encoding="utf-8"?> <!--Flex中如何使用addChild()和removeCh ...
- Unity NGUI中动态添加和删除sprite
(以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- adoop集群动态添加和删除节点
hadoop集群动态添加和删除节点说明 上篇博客我已经安装了Hadoop集群(hadoop集群的安装步骤和配置),现在写这个博客我将在之前的基础上进行节点的添加的删除. 首先将启动四台机器(一主三从) ...
- js动态添加和删除标签
html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...
- SpringBoot定时任务升级篇(动态添加修改删除定时任务)
需求缘起:在发布了<Spring Boot定时任务升级篇>之后得到不少反馈,其中有一个反馈就是如何动态添加修改删除定时任务?那么我们一起看看具体怎么实现,先看下本节大纲: (1)思路说明: ...
随机推荐
- Vue中使用eslint
.eslintrc.js module.exports = { root: true, parser: 'babel-eslint', "env": { "browser ...
- 采用C/C++语言如何实现复数抽象数据类型Complex
记录一下! 采用C/C++语言如何实现复数抽象数据类型Complex #include <stdio.h> typedef struct Complex { double e1; // 实 ...
- IoT Architecture
- 03_CronTrigger
[Cron表达式] Quartz使用类似于Linux下的Cron表达式定义的时间规则,Cron表达式由6到7个空格分隔的时间字段组成. [ 字符说明 ] * :可以用在所有字段中,表示对应时间域内的每 ...
- Oracle 查看表占用的空间大小
select TABLE_NAME , num_rows * avg_row_len /1024/1024 AS KJfrom ALL_tables WHERE TABLE_NAME IN (sele ...
- html 表格边框的设置
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- @Component 注解
@Component a) 初始化的名字默认为类名首字母小写:UserService 在容器中默认为 userService b) 可以指定初始化 bean 的名字: @Component(valu ...
- matlab矩阵
矩阵的转置用',比如: a = [1,2,3]; b = a'; %b 转置成一个列向量,可以用于矩阵 linspace是Matlab中的一个指令,用于产生指定范围内的指定数量点数,相邻数据跨度相同, ...
- css:改变滚动条样式
以下亲测谷歌内核的浏览器有用,微软和火狐无效 body::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1 ...
- 解决Image在canvas以及audio、video在AudioContext下跨域问题
媒体元素嘛,在对应的标签或对象上加上 crossOrigin = 'anonymous' 即可. 例如 Image 在canvas 上绘制时会跨域: <img crossOrigin=" ...