Vue中通过表单向对象数组中添加数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" style="position: relative;left: 600px;top: 30px;">
<el-form style="width:300px;left: 500px;">
<el-form-item label="书名">
<el-input v-model="newBook.title"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="newBook.author"></el-input>
</el-form-item>
<el-form-item label="出版日期">
<el-date-picker type="date" placeholder="选择日期" v-model="newBook.publishedAt" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-form>
<el-button v-on:click="addNewBook">add</el-button>
<el-table :data="books" border stripe style="position: relative;top: 15px; width: 921px">
<el-table-column prop="title" label="标题" width="220">
</el-table-column>
<el-table-column prop="author" label="姓名" width="500">
</el-table-column>
<el-table-column prop="publishedAt" label="日期" width="200">
</el-table-column>
</el-table>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
data() {
return {
books: [{
title: 'MySQL必知必会',
author: 'Ben Forta(刘晓霞 钟鸣 译)',
publishedAt: '2017-03-13'
},
{
title: '算法图解',
author: 'Aditya Bhargava(袁国忠 译)',
publishedAt: '2016-04-10'
},
{
title: '算法(第4版)',
author: 'Robert Sedgewick,Kevin Wayne(谢璐云 译)',
publishedAt: '2012-10-10'
},
{
title: '我的第一本算法书',
author: '[日]石田保辉(张贝 译)',
publishedAt: '2018-10-29'
},
],
newBook: {
title: '',
author: '',
publishedAt: ''
}
}
},
methods: {
addNewBook() {
this.books.push({
title: this.newBook.title,
author: this.newBook.author,
publishedAt: this.newBook.publishedAt.getFullYear()+"-"+this.newBook.publishedAt.getMonth()+"-"+this.newBook.publishedAt.getDate()
})
}
}
})
console.log(vm)
vm.$mount('#app')
</script>
</body>
</html>
|