Vue.js makes developing front end apps easy. However, there are still chances that we’ll run into problems.

In this article, we’ll look at some common issues and see how to solve them.

Updating the Parent Model from Child

We can update a parent component’s model from a child component by emitting an event in a child component and then listening to it in the parent.

For instance, we can write:

this.$emit('update', newData)

in the child.

Then in the parent component, we can write:

<child :myProp="value" @update="onUpdate($event)" />

We can get the value from child with the $event object, which has the 2nd argument of $emit .

onUpdate lets us run code that uses the value.

For instance, we can define the onUpdate method by writing:

methods: {
  onUpdate(newData) {
    this.value = newData
  }
}

Navigation to a New Route with Vue Router

If we defined our routes by writing:

main.js

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

...
Vue.use(VueRouter);
export const router = new VueRouter({
  mode: 'hash',
  base: "./",
  routes: [
    { path: "/", component: Home },
    { path: "/foo", component: Foo }
  ]
})
new Vue({
  router,
  ...
}).$mount("#app");

Then we can navigate to a route in a component by writing:

this.$router.push("/foo");

We can also import navigate in a Vuex action if we have a Vuex store in our app.

For example, we can write:

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

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

#javascript #web-development #technology #programming #vue #vue.js