如何在Vue表单中获取输入数据？
提问于 2021-01-01 17:32:21
我有以下组件：
<template>
<div>
<form @submit.prevent="formSubmit()">
<input type="text" class="form-control" v-model="amount">
<button class="btn btn-primary" style="width: 100%">Buy</button>
</form>
</div>
</template>
<script>
export default {
props:{
},
computed: {
amount() {
return this.$store.getters.amount
},
},
methods: {
formSubmit() {
let currentObj = this;
console.log(this.amount)
axios.post('MY-BACKEND', {
amount: this.amount,
},
.then(function (response) {
currentObj.output = response.data;
}.bind(this))
.catch(function (error) {
currentObj.output = error;
});
},
}
}
</script>这是一个带有输入文本字段的标准表单。我的代码的问题是，当我输入字段时，amount的值不是我在字段中输入的值，但它始终是this.$store.getters.coinBalance设置的默认值。因此，假设当我加载组件时，amount的值为60，并且我在字段120中输入，则amount的值保持为60。我该如何解决这个问题呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-01 17:40:20
您正在从存储中获取amount，但是当您的输入发生更改时，您并没有更新它。要更新存储中的amount值，可以创建一个setter for your computed property
computed: {
amount: {
get() {
return this.$store.getters.amount
},
set(val) {
this.$store.commit('updateAmount', val)
}
},
},并在您的商店中创建一个突变updateAmount来更新amount
updateAmount(state, amount) {
state.amount = amount
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65532029
复制
腾讯云开发者
