Category: JavaScript

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.

Sometimes, we want to fix conflict between templates of Twig and Vue.js.

In this article, we’ll look at how to fix conflict between templates of Twig and Vue.js.

How to fix conflict between templates of Twig and Vue.js?

To fix conflict between templates of Twig and Vue.js, we can change the delimiters when we’re creating the Vue instance.

For instance, we write

new Vue({ delimiters: ['${', '}'] })

to set the template variable delimiters to be different from the default double curly braces in Vue 2.

In Vue 3, we write

Vue.createApp({ delimiters: ['${', '}'] })

to set the template variable delimiters to be different from the default double curly braces with Vue.createApp.

Conclusion

To fix conflict between templates of Twig and Vue.js, we can change the delimiters when we’re creating the Vue instance.