Category: Vue Answers

Sometimes, we want to pass multiple parameters to mutation with Vuex.

In this article, we’ll look at how to pass multiple parameters to mutation with Vuex.

How to pass multiple parameters to mutation with Vuex?

To pass multiple parameters to mutation with Vuex, we can put all the values in the same object and destructure them in the mutation method.

For instance, we write

const store = new Vuex.Store({
  //...
  mutations: {
    authenticate(state, { token, expiration }) {
      localStorage.setItem("token", token);
      localStorage.setItem("expiration", expiration);
    },
  },
  //...
});

to add the authenticate mutation that takes an object with the token and expiration properties.

And then we can commit the mutation with

store.commit("authenticate", {
  token,
  expiration,
});

We call commit with the mutation name and the object with all the values we want to pass into the mutation’s 2nd parameter.

Conclusion

To pass multiple parameters to mutation with Vuex, we can put all the values in the same object and destructure them in the mutation method.

Sometimes, we want to pass data from parent to child component in Vue.js.

In this article, we’ll look at how to pass data from parent to child component in Vue.js.

How to pass data from parent to child component in Vue.js?

To pass data from parent to child component in Vue.js, we can make our child component accept props from the parent.

For instance, in the child component, we write

<script>
//...

export default {
  name: "ProfileForm",
  //...
  props: ["user"],
  created() {
    console.log(this.user);
  },
  //...
};
</script>

to register the user prop with

props: ["user"]

Then in the parent component, we write

<template>
  <div class="container">
    <profile-form :user="user"></profile-form>
  </div>
</template>

to add the profile-form into the parent component and set the user prop to user to pass user down to profile-form with

:user="user"

Conclusion

To pass data from parent to child component in Vue.js, we can make our child component accept props from the parent.

Sometimes, we want to fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js.

In this article, we’ll look at how to fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js.

How to fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js?

To fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js, we should make sure we don’t modify reactive properties in computed properties.

For instance, we write

<script>
//...

export default {
  //...
  computed: {
    getkeys() {
      return this.originalKeys.map((k) => this.getTranslation(k));
    },
  },
  //...
};
</script>

to return an array that we created by call this.orginalKeys.map with a callback that returns the value from this.getTranslation with entry k in getKeys.

We didn’t change any reactive property values in the getKeys method.

Conclusion

To fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js, we should make sure we don’t modify reactive properties in computed properties.

Sometimes, we want to navigate using Vue Router from Vuex actions.

In this article, we’ll look at how to navigate using Vue Router from Vuex actions.

How to navigate using Vue Router from Vuex actions?

To navigate using Vue Router from Vuex actions, to import the router into our Vuex store and call push on it.

For instance, we write

main.js

import Vue from "vue";
import VueRouter from "vue-router";

//...

Vue.use(VueRouter);

export const router = new VueRouter({
  base: "/",
  routes: [
    { path: "/", component: welcome },
    { path: "/welcome", component: welcome },
  ],
});

to create a router object and export it.

Then we write

import { router } from "./main.js";

export const someAction = ({ commit }) => {
  router.push("/welcome");
};

to import the router and then call router.push in our Vuex action method.

Conclusion

To navigate using Vue Router from Vuex actions, to import the router into our Vuex store and call push on it.

Sometimes, we want to fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js.

In this article, we’ll look at how to fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js.

How to fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js?

To fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js, we should make sure that we don’t use iteration variables we defined in v-for as values for v-model.

For instance, we write

<template>
  <table id="app">
    <tr v-for="(run, index) in settings.runs">
      <td>
        <input
          type="text"
          :name="`run${index}`"
          v-model="settings.runs[index]"
        />
      </td>
      <td>
        <button @click.prevent="removeRun(index)">X</button>
      </td>
      <td>{{ run }}</td>
    </tr>
  </table>
</template>

to loop through settings.runs with v-for and render inputs for each entry.

We set v-model to settings.run[index] instead of run to let us set the settings.runs array entry values without the "You are binding v-model directly to a v-for iteration alias" being thrown.

Conclusion

To fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js, we should make sure that we don’t use iteration variables we defined in v-for as values for v-model.