Question 179618 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I use pinia store getters with v-model on an input?

In my application, i am working on storing user form responses. I have created pinia store and created each forms object. Using this store into my component and passing the getter function of that store into variable,

That variable, i am using as a v-model. After giving input also it is not returning anything. As well as i am not getting any error for this. Did i follow any wrong approach?

Userstore.js

    import { defineStore } from 'pinia';
    
    export const userResponses = {
      formsResponses: {
        form1: {
          input1: '',
        },
      },
    };
    
    export default defineStore('userStore', {
      state() { return userResponses; },
    
      getters: {
        getFormsInput: (state) => state.formsResponses.form1,
      },
      actions: {
        setFormsResponses(formResponses) {
          this.formsResponses.form1 = formResponses;
        },
      },
    });

Form1.vue

  <template>
    <input type="text" name="input_form" v-model="input"/>
    <button type="Primary" @click="submit">submit</button>
  </template>
    
    <script setup>
    import { computed, ref } from 'vue';
    import useUserStore from '@/store/userStore';
    
    
    const userStore = useUserStore();
    
    const input = ref('');
    const responses = computed(() => userStore.getFormsInput);
    
    reponses.value.input1 = input.value;
    
    function submit() {
      console.log(reponses.value.input1); // it is giving nothing
    }
    
    </script>

Why i am not able to use getters or not updating the value? Shall i directly can use getters into v-model?

Tags:

2

Answers


  1. 0

    Getter from pinia is a computed value of a state afterall. You should prevent using a computed value as a v-model. Especially when there is no getter and setter for getter in pinia right now.

    If the getFormsInput is only for returning a specific property of a json. I suggest you to mutate directly the state by accessing formsResponses.form1.input1.

    <template>
  <input type="text" name="input_form" v-model="userStore.formsResponses.form1.input1"/>
  <button type="Primary" @click="submit">submit</button>
</template>

<script setup>
import { computed, ref } from 'vue';
import useUserStore from '@/store/userStore';

const userStore = useUserStore();

function submit() {
  console.log(userStore.formsResponses.form1.input1); //they should be the same
  console.log(userStore.getFormsInput); //they should be the same
}

</script>

    Btw I don’t think .value is needed when you try to access the value of a json property.

    Login or Signup to reply.
  2. 0

    I believe you made a typo mistake here.

    const responses = computed(() => userStore.getFormsInput);
    
responses.value.input1 = input.value; //typo responses
    
function submit() {
  console.log(responses.value.input1); // typo responses
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search