Vue - change default input text value dynamically

Question

I have a simple Vue form component, it has some text inputs:

<input type="text" class="form-control" v-model="amount">

This text input has the following default value:

mounted() {
    this.$store.commit('refreshBalance')
  },

  data() {
      return {
        amount: this.$store.getters.baseBalance,
      };
  },

The problem with my code is that the value of amount is always the same, it doesn't change if i change the value of that Vuex store.

So, for example, if when i open the page this.$store.getters.baseBalance is equal to 10 and i change it to 20, the default value of that input field will always be 10. Is there any way i can make it reactive? Thanks in advance.

Where and how do you change the value of the baseBalance? Could you post that part of your code? — nemesv
– nemesv, Commented Dec 31, 2020 at 15:18
Yes, i added it. Basically when the component is loaded, i refresh that value — JayK23
– JayK23, Commented Dec 31, 2020 at 15:20

Nick Dawes · Accepted Answer · 2020-12-31 15:34:51Z

2

Change it to a computed property, and use the get and set methods. You’d also need to create an action in your store to update the baseBalance, which in the code below I’ve named SET_BALANCE.

When you update the input, the set method runs, which commits the value of amount to the store via. SET_BALANCE.

<input type="text" class="form-control" v-model="amount">

...

computed: {
  amount: {
    set(amount) {
      this.$store.commit('SET_BALANCE', { amount })
    },
    get() {
      return this.$store.getters.baseBalance
    }
  }
}

answered Dec 31, 2020 at 15:34

Nick Dawes

2,2641 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue - change default input text value dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related