Update from returning empty value for textarea

this is my first time doing form update using vue and axios

i have simple update form with analytics textarea on my app and binded using theme.analytics that i’m receiving store.js

<form action="#" method="POST" enctype="multipart/form-data" @submit.prevent="analytics">

   <textarea v-model="theme.analytics" name="analytics" required"></textarea> 

   <button type="submit">Save</button>

  </form>

getting the data from store like this

  mounted () {

    this.$store.dispatch('getThemeSettings');

  },

  computed:{

    ...mapState([

        'theme',

      ]),

  },

the form is returning empty value for the textarea because i’m not being able to get the value probably ???

    analytics : function(index){

      axios.put('api/analytics', {

          analytics : analytics, // here is the issue i cant get the value of the textarea

      })

      .then( response => {

        this.$store.dispatch('analytics', response.data);
        
      })

      .catch( error => {

          if (error.response.status == 422) {

            this.errors = error.response.data.errors;

            Event.$emit('requestAlertDanger');

          }

      })

      event.target.reset();

    },

It looks like the text area is already binded but not sure how to get the value to be submitted.

any ideas

I think you need to use mutations to change your state.

mutations:{
 setAnalytics(state,payload){
   state.analytics = payload;
 }
}



analytics : function(index){

      axios.put('api/analytics', {

          analytics : analytics, // here is the issue i cant get the value of the textarea

      })

      .then( response => {

        this.$store.commit('setAnalytics', response.data);
        
      })

1 Like

Thank you for your support,

The analytics textarea is already binded, so basically its already reactive, just need to get the new entered text from the user??

You solution is good if i was looking to change the state (i’m not), but i can do that after i can grab the new entered value from the user to update the state.

Not sure about mutations, I don’t see the need

Sorry I misunderstood you.

Where your analytics? Analytics maybe is undefined.

If you can provide JSFiddle, I can understand your issue better. :grinning:

exactly, they are not defined, not sure how to do it, its my first time doing form update.

this is the JSFiddle copy of my component as requested.

https://jsfiddle.net/jomart_123/xyg02mLr/12/

Sorry, I maybe can’t solve this problem for you. I feel that there are many errors in this usage.

First, v-model should bind data instead of state, so you can’t get the data in typing.

Second, analytics is the duplicate property value.

I think your expect is get the new data from state.

You can assign new store state to data after update the store state.

computed:{
 ...mapState([
        'theme',
      ]),
}

//After store state update
this.analytics = this.theme.analytics ;
1 Like

that’s ok, …

Thank you for what you did so far, highly appreciated

1 Like