How can I store the value of each input into vuex?

Question

This is my "Test.vue"components


    <template>
    <div>
      <div>
          <button  @click="decrenumber (id)">-</button>
          <input name="test" type="text" :key="id" v-model.number="num">
          <label for="test" ></label>
          <button @click="increnumber (id)">+</button>
      </div>
    </div>
    </template>
    <script>
    import { mapState } from 'vuex';
    
    export default {
      name: 'Test',
      data() {
        return {
          num: 0,
        };
      },
      props: {
        id: { type: Number, default: 0 },
      },
      methods: {
        increnumber(id) {
          this.num += 1;
          this.$emit('update', this.num);
        },
        decrenumber(id) {
          this.num -= 1;
          this.$emit('update', this.num);
        },
      },
    };
    </script>

And I have 5 Test.vue components in my TestView.vue


    <template>
        <div >
           <Test :id="index" v-for="(n,index) in 5" @update="selfUpdate"></Test>
        </div>
    </template>
    <script>
    
    import Test from '../components/Test.vue';
    
    export default {
      name: 'TestView',
      components: {
        Test,
      },
      data() {
        return {
          inputValue: 0,
        };
      },
      methods: {
        selfUpdate(num) {
          this.inputValue = num;
          this.$store.state.test.number = this.inputValue;
        },
      },
    };
    </script>

How can I store the value of each input from TestView.vue into vuex? I know it is possible to use array.push() but this keeps increasing How did I just make the input only exist in five indexes, If you enter the input in the same field, it can replace the old value

Possible duplicate of https://stackoverflow.com/questions/61955900/bind-a-vuex-store-state-value-to-an-input-vuejs — Alicia Sykes, Apr 15 '22 at 15:33
You don't set the value on state, you need to create a mutation that set the value for you, and call `commit` with the payload to update the state. For more info refer to https://vuex.vuejs.org/guide/mutations.html — Luis de Brito, Apr 16 '22 at 02:33
@LuisBrito I know how to call commit and create mutation to set the value, my quetion is i don't know how to store each 5 input's value, and when change same input value how can i overwrite old value. — Anita, Apr 16 '22 at 03:18

score 1 · Answer 1 · answered Apr 16 '22 at 03:33

To save the value of each input you'll need a key pair of input/value for each input, this way when updating a value you will know which one to update.

I adjusted the component to save each value;

The first change is on the template, it calls the method selfUpdate and passes the value emitted by the component as well the input index, so the inputValues will be updated only for that specific input.

The second adjustment is on an assignment of the value, it's assigned to a position that refers to the input, that's why the index is passed along with the value.

<template>
  <div >
    <Test
        :id="index"
        v-for="(n,index) in 5"
        @update="(num) => selfUpdate(num, index)"
    />
  </div>
</template>
<script>

import Test from '../components/Test.vue';

export default {
  name: 'TestView',
  components: {
    Test,
  },
  data() {
    return {
      inputValues: []
    };
  },
  methods: {
    selfUpdate(num, index) {
      this.inputValue[index] = num; // saves the value at index `index`
      this.$store.state.test.number = this.inputValue;
    },
  },
};
</script>

Thank you very much for your help. I am new to vue and I am not familiar with some of the usage. Through your answer I found that I am missing the use of input index Thank you very much for your answer. — Anita, Apr 16 '22 at 04:22

How can I store the value of each input into vuex?

1 Answers1