使用vue方法点击按钮显示输入框,输入文本,点击确定,然后把数据推送到数组中 ,然后发送请求,更新数据
时间: 2023-06-12 14:01:58 浏览: 1315
好的,我了解了您的问题。您需要在Vue中实现一个点击按钮显示输入框,输入文本,点击确定之后将数据推送到数组中,然后发送请求并更新数据的功能。
首先,您需要在Vue模板中添加一个按钮和一个输入框。当用户点击按钮时,显示输入框:
```html
<template>
<div>
<button @click="showInput">显示输入框</button>
<div v-if="show">
<input type="text" v-model="inputValue">
<button @click="submitData">确定</button>
</div>
</div>
</template>
```
然后,在Vue组件中添加show、inputValue和submitData方法:
```javascript
<script>
export default {
name: 'MyComponent',
data() {
return {
show: false,
inputValue: '',
data: []
}
},
methods: {
showInput() {
this.show = true;
},
submitData() {
// 将输入的数据推到数组中
this.data.push(this.inputValue);
// 发送请求并更新数据
axios.post('/api/updateData', {
data: this.data
}).then(res => {
this.data = res.data;
this.show = false; // 隐藏输入框
}).catch(err => {
console.log(err);
});
}
}
}
</script>
```
在submitData方法中,首先将输入的数据推到data数组中,然后使用axios发送POST请求到后端API更新数据。如果请求成功,将返回更新后的数据,并将其赋值给data数组。最后,隐藏输入框。
阅读全文