vue动态添加数据

简介: vue动态添加数据

1,先声明一个数组为响应式的,里面有一些数据

const tableData = ref([
  {
    sex: '女',
    name: '姓名1',
    birthday:'0512'
  },
  {
    sex: '女',
    name: '姓名2',
    birthday:'0314'
  },
  {
    sex: '男',
    name: '姓名3',
    birthday:'1012'
  },
  {
    sex: '女',
    name: '姓名4',
    birthday:'0915'
  },
]);

我这里用的是表格的,是要动态添加表格

2,获取到需要新增的值

给表单绑定v-model

<el-form :model="form" label-width="120px">
    <el-form-item label="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="date">
      <el-input v-model="form.date" />
    </el-form-item>
    <el-form-item label="num">
      <el-input v-model="form.num" />
    </el-form-item>

3,在新增按钮处点击添加往数组里面push相对应的值

tableData.value.push({
    name:form.name,
    date:form.date,
    add:form.num
  })

即可实现动态添加,不过刷新页面数据会恢复如初

目录
相关文章
|
5天前
|
JavaScript 前端开发
Vue 创建组件
Vue 创建组件
|
5天前
|
缓存 JavaScript
VUE组件:Vue中的动态组件是什么?
VUE组件:Vue中的动态组件是什么?
52 4
|
7月前
|
前端开发 JavaScript API
【Vue3】组件数据懒加载
【Vue3】组件数据懒加载
72 0
|
5天前
|
JavaScript 前端开发
vue3中使用动态组件
vue3中使用动态组件
15 0
|
5天前
|
JavaScript
Vue动态添加新的属性到实例上(vue的问题)
Vue动态添加新的属性到实例上(vue的问题)
|
5天前
|
JavaScript
vue动态添加数据
vue动态添加数据
37 2
|
5月前
|
JavaScript
【Vue】—动态组件
【Vue】—动态组件
|
6月前
|
JavaScript 前端开发
Vue中动态树形菜单,以及
Vue中动态树形菜单,以及
|
7月前
32Vue - 列表渲染(组件 和 v-for)
32Vue - 列表渲染(组件 和 v-for)
24 0
|
8月前
|
JavaScript
Vue 组件列表
Vue 组件列表
38 0