CODEWITHSUNDEEP
formsvue.jsvuex
AustinFoss
AustinFoss

Reputation: 405

Passing multiple data points to an action? VUEX

So I have a form that collects 3 data points that looks like this:

<form class="" >
  <table>
    <tr>
      <td>Maximum Temperature</td>
      <td><input class="setSettings" v-model="settings.maxTMP" type="number" max="30" min="5"></td>
    </tr>
    <tr>
      <td>Minimum Humidity</td>
      <td><input class="setSettings" v-model="settings.minHUM" type="number" max="95" min="20"></td>
    </tr>
    <tr>
      <td>Maximum CO2</td>
      <td><input class="setSettings" v-model="settings.maxCO2" type="number" min="200" max="5000" step="10"></td>
    </tr>
  </table>
  <button type="button" v-on:click="whatSettings(settings)">Update Settings</button>
</form>

My data in the script tag is stored in the components local data, not the store, ike this:

data: function() {
  return {
    settings: {
      maxTMP: "",
      minHUM: "",
      maxCO2: ""
    }
  }
}

There's no reason to put it through a mutation and commit it to the store as the purpose for the action is merely to send the data via post request to receiving api.

My methods for the component look like this:

methods: {
  ...mapActions({
    setSettings: 'setSettings'
  }),
  whatSettings(settings){
    let foo = settings.maxTMP;
    let bar = settings.minHUM;
    let uhm = settings.maxCO2;
    console.log(foo);
    console.log(bar);
    console.log(uhm);
    this.setSettings(foo,bar,uhm)

  }
},

And that action from the store is write like this:

setSettings(foo,bar,uhm) {
  console.log("Set these settings");
  console.log(foo);
  console.log(bar);
  console.log(uhm);
},

Please forgive all the console.log()'s. I have it like this cause I was trying to test out different combinations of things to figure out where it goes wrong. Right now when I click the Update Settings button the console prints the whatSettings() correctly so I know that foo, bar, uhm are the correct value as they are passed into the setSettings() action. The problem is in the action's logs. "Set these settings" and foo are printed correctly followed by a single undefined, not two. So I'm not sure exactly what's happening with bar & uhm. When I rearrange the order it's always the first that gets printed.

Is it a problem with multiple arguments being passed to the action? Ideally I would just like it to look like this directly in the button tag for neatness but that didn't work so I tried trouble shooting like this:

v-on:click="this.setSettings(settings.maxTMP, settings.minHUM, settings.maxCO2)"

Thanks for reading and I appreciate the help!

Upvotes: 1

Views: 2509

Answers (1)

AustinFoss
AustinFoss

Reputation: 405

Well, after a little more looking around I found this and it fixed my problem: Axios post request with multiple parameters in vuex action

correct button tag:

<button type="button"
  v-on:click="setSettings({
    foo: settings.maxTMP,
    bar: settings.minHUM,
    uhm: settings.maxCO2
  })"
>Update Settings</button>

correct vuex store action:

setSettings({commit}, {foo, bar, uhm}) {
  console.log("Set these settings");
  console.log(foo);
  console.log(bar);
  console.log(uhm);
},

Not entirely sure why the {commit} needs to be present, but it does otherwise I just get 3 undefined results in the log. But it works now!

Upvotes: 2

Related Questions