使用vue方法点击按钮新增一条数据,然后把数据推送到数组中 ,然后发送请求,更新数据
时间: 2023-06-12 07:01:54 浏览: 206
vue 点击按钮增加一行的方法
好的,您可以先在页面上定义一个按钮,然后在该按钮的点击事件中调用一个函数,用来新增一条数据并推送到数组中。示例代码如下:
```html
<template>
<div>
<button @click="addData">新增数据</button>
</div>
</template>
<script>
export default {
data() {
return {
dataList: []
};
},
methods: {
addData() {
// 新增一条数据并推送到数组中
const data = { name: 'John', age: 25 };
this.dataList.push(data);
// 发送请求,更新数据
this.$http.post('/api/update', this.dataList).then(response => {
console.log(response.data);
});
}
}
};
</script>
```
在这个示例代码中,我们在页面上定义了一个按钮,并添加了点击事件`@click`。在`addData()`方法中,我们新增了一条数据并将其推送到数据数组中。然后我们发送了一个 POST 请求到 `/api/update` 接口,并传递了数据数组作为请求体。当请求得到响应时,我们通过控制台输出了响应数据。
希望这个示例代码能够帮助您解决问题,如果您还有其他问题,请继续提问。
阅读全文