#vue.js
#vue.js
Вопрос:
У меня есть следующий компонент:
<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
is 60
и я ввожу в поле 120
, значение amount
остается 60
. Как я могу это исправить?
Ответ №1:
Вы получаете amount
данные из хранилища, но не обновляли их при изменении ваших входных данных. Чтобы обновить amount
значение в хранилище, вы можете создать сеттер для своего вычисляемого свойства:
computed: {
amount: {
get() {
return this.$store.getters.amount
},
set(val) {
this.$store.commit('updateAmount', val)
}
},
},
И в вашем хранилище создайте мутацию updateAmount
для обновления amount
:
updateAmount(state, amount) {
state.amount = amount
}
Комментарии:
1. Большое вам спасибо! У меня уже есть мутация для ее обновления, но я имею в виду следующее: могу ли я получить значение суммы, которую я ввожу в поле, без необходимости вызывать мутацию?
2. Вы можете привязать сумму к свойству данных, т. Е. Иметь что-то вроде
data() { return { amount: 60 } }
и удалить вычисленноеamount
, но тогда изменения не будут обновляться в хранилище.3. Хорошо! Я пробовал это, но значение amount остается неизменным. Предположим, когда я открываю страницу, значение суммы по умолчанию равно 100, если я ввожу в текстовое поле ввода «5» и нажимаю кнопку «Купить», значение должно быть тем, которое я ввожу, но вместо этого оно все равно равно 100
4. значение должно быть тем, которое я ввожу, но вместо этого оно по-прежнему равно 100 , какое это значение? Вы получили значение из хранилища или это локальное
amount
значение?5. Действительно, мне нужен был созданный жизненный цикл