VueJs: Form handling with Vuex and inputs generated with an API

Question

Here's an example of a component:

<script>
    export default {
        name: 'my-form',

        computed: {
            myModules() {
                return this.$store.state.myModules;
            }
        }
</script>

<template>
    <form>
        <p v-for="module in myModules">
            <input type="checkbox" :value="module.id" />
            <label>module.name</label>
        </p>
        <button type="submit">Submit</button>
    </form>
</template>

The associated store:

    state: {
        myModules: []
    },

    mutations: {
        setModules(state, modules) {
            state.myModules = modules;
        }
    },

    actions: {
        getModules({commit}) {
            return axios.get('modules')
            .then((response) => {
                commit('setModules', response.data.modules);
            });
        }
    }

And finally, an example of return of the API "getModules":

modules : [
    {
        id: 1,
        name: 'Module 1',
        isActive: false
    },
    {
        id: 2,
        name: 'Module 2',
        isActive: false
    },
    {
        id: 3,
        name: 'Module 3',
        isActive: false
    }
]

My question: what's the best way to change the "isActive" property of each module to "true" when I check the checkbox corresponding to the associated module, directly in the store?

I know that Vuex's documentation recommends to use "Two-way Computed Property" to manage the forms, but here I don't know the number of modules that the API can potentially return, and I don't know their name.

Thank you in advance!

Etki · Accepted Answer · 2018-02-28 12:05:37Z

1

This is a little bit wicked approach, but it works. You can create an accessor object for every item you access in a loop:

const store = new Vuex.Store({
  mutations: {
    setActive (state, {index, value}) {
      state.modules[index].isActive = value
    }
  },
  state: {
    modules : [
      {
        id: 1,
        name: 'Module 1',
        isActive: false
      },
      {
        id: 2,
        name: 'Module 2',
        isActive: false
      },
      {
        id: 3,
        name: 'Module 3',
        isActive: false
      }
    ]
  }
});
const app = new Vue({
  el: '#target',
  store,
  methods: {
    model (id) {
      const store = this.$store;
      // here i return an object with value property that is bound to 
      // specific module and - thanks to Vue - retains reactivity
      return Object.defineProperty({}, 'value', {
        get () {
          return store.state.modules[id].isActive
        },
        set (value) {
          store.commit('setActive', {index: id, value});
        }
      });
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.min.js"></script>
<div id="target">
  <div v-for="(item, id) in $store.state.modules">
    Module #{{ item.id }} state: {{ item.isActive }}
  </div>
  <div v-for="(item, id) in $store.state.modules">
    <label>
      Module #{{ item.id }}
      <input type="checkbox" v-model="model(id).value"/>
    </label>
  </div>
</div>

This is still quite a messy approach, but at least you don't have to commit mutations directly in template. With a little help of Vue.set() you can use this approach even to overcome standard reactivity caveats.

answered Feb 28, 2018 at 12:05

Etki

2,1643 gold badges22 silver badges42 bronze badges

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

2 Comments

Baptiste Over a year ago

I don't really know if it's a good practice, but it works perfectly! Thank you.

oniondomes Over a year ago

If you're interested, take a look at my solutions. I find them a bit more organized.

oniondomes · Accepted Answer · 2018-02-28 19:57:41Z

1

I have an alternative solution for you. ~~You could make a child component for the checkboxes to clean up the code a bit~~.

UPD: I just realised that everything that I and @etki proposed is an overkill. I left the old version of my code below in case you still want to take a look. Here is a new one:

const modules = [{
    id: 1,
    name: 'Module 1',
    isActive: true,
  },
  {
    id: 2,
    name: 'Module 2',
    isActive: false,
  },
  {
    id: 3,
    name: 'Module 3',
    isActive: false,
  },
];

const store = new Vuex.Store({
  state: {
    myModules: [],
  },
  mutations: {
    SET_MODULES(state, modules) {
      state.myModules = modules;
    },
    TOGGLE_MODULE(state, id) {
      state.myModules.some((el) => {
        if (el.id === id) {
          el.isActive = !el.isActive;
          return true;
        }
      })
    }
  },
  actions: {
    getModules({
      commit
    }) {
      return new Promise((fulfill) => {
        setTimeout(() => {
          commit('SET_MODULES', modules);
          fulfill(modules);
        }, 500)
      });
    }
  }
});

const app = new Vue({
  el: "#app",
  store,
  data: {},
  methods: {
    toggle(id) {
      console.log(id);
      this.$store.commit('TOGGLE_MODULE', id);
    }
  },
  computed: {
    myModules() {
      return this.$store.state.myModules;
    },
    output() {
      return JSON.stringify(this.myModules, null, 2);
    },
  },
  mounted() {
    this.$store.dispatch('getModules').then(() => console.log(this.myModules));
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <form>
    <div v-for="data in myModules">
      <label :for="data.id">{{ data.name }}: {{data.isActive}}</label>
      <input type="checkbox" :id="data.id" :name="'checkbox-' + data.id" :checked="data.isActive" @change="toggle(data.id)">
    </div>
  </form>
  <h3>Vuex state:</h3>
  <pre v-text="output"></pre>
</div>

As you can see above you could just call a function on input change and pass an id as a parameter to a method that fires vuex action.

The old version of my code.

A new one on jsfiddle

edited Feb 28, 2018 at 19:57

answered Feb 28, 2018 at 18:33

oniondomes

2,07315 silver badges22 bronze badges

2 Comments

Baptiste Over a year ago

It's a good solution too, thank you! Etki's solution keeps the "v-model" system, and yours is less verbose. But both work.

oniondomes Over a year ago

@Baptiste v-model's still used in my first version based on child components though

Collectives™ on Stack Overflow

VueJs: Form handling with Vuex and inputs generated with an API

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related