Блог

Главная - Вопросы по программированию - Как получить входные данные в форме Vue?

Как получить входные данные в форме Vue?

#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. Действительно, мне нужен был созданный жизненный цикл