Vue组件:组件的动态添加与删除
2024-09-28 12:28:45
一、实现效果
二、实现代码
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>
最新文章
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 角色权限的配置页面改进优化
- C#进阶系列——DDD领域驱动设计初探（一）：聚合
- Quartz与Spring整合进行热部署的实现（一）
- 活跃天数计算用户等级模仿QQ的升级方式
- Cocos2d-x 2.x项目创建
- JavaPersistenceWithHibernate第二版笔记-第五章-Mapping value types-007UserTypes的用法(@org.hibernate.annotations.Type、@org.hibernate.annotations.TypeDefs、CompositeUserType、DynamicParameterizedType、、、)
- 向linux内核加入系统调用新老内核比較
- javascript中的undefined,null,"",0和false的云集
- 【原】Spark中Client源码分析（二）
- Linux系统及应用问题分析排查工具
- 第 2 章 代理模式【Proxy Pattern】
- MySQL账号授权操作
- mongodb debug
- 奶瓶beini系统
- Nastya Is Buying Lunch
- P1605 迷宫
- java运算符和流程图
- 【Alpha阶段】测试报告
- VS2013打包程序步骤
- HTML和CSS的静态页面