Category: Vue Answers

Sometimes, we want to fix the ‘Component template should contain exactly one root element’ error with Vue.js.

In this article, we’ll look at how to fix the ‘Component template should contain exactly one root element’ error with Vue.js.

How to fix the ‘Component template should contain exactly one root element’ error with Vue.js?

To fix the ‘Component template should contain exactly one root element’ error with Vue.js, we should make sure we only have one root element in our component template.

For instance, we write

<template>
  <div>
    <div class="form-group">...</div>

    <div class="col-md-6">...</div>
  </div>
</template>

to wrap the 2 divs with another div to avoid this error.

Vue 3 allows multiple root elements, so we won’t see this error with multiple elements as the child of template.

Conclusion

To fix the ‘Component template should contain exactly one root element’ error with Vue.js, we should make sure we only have one root element in our component template.

Sometimes, we want to access Vuex state when defining Vue Router routes.

In this article, we’ll look at how to access Vuex state when defining Vue Router routes.

How to access Vuex state when defining Vue Router routes?

To access Vuex state when defining Vue Router routes, we can import the store in the file with the Vue Router hooks.

For instance, we write

import Vuex from "vuex";

const store = new Vuex.Store({
  state: {
    globalError: "",
  },
  mutations: {
    setGlobalError(state, error) {
      state.globalError = error;
    },
  },
});

export default store;

to create a store and export it using the Vuex.Store constructor in store.js.

Then in router.js, we write

import Vue from "vue";
import VueRouter from "vue-router";
import store from "./store.js";

Vue.use(VueRouter);

const routes = [
  { path: "/home", name: "Home", component: Home },
  { path: "/login", name: "Login", component: Login },
  {
    path: "/secret",
    name: "Secret",
    component: SecretPage,
    meta: { requiresLogin: true },
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  if (store.state.globalError) {
    //...
    next("/Login");
  } else {
    next();
  }
});

to add the routes array with the routes.

And then we create a VueRouter instance with the routes.

Next, we get the globalError store state from store.state.globalError in the beforeEach callback.

Conclusion

To access Vuex state when defining Vue Router routes, we can import the store in the file with the Vue Router hooks.

Sometimes, we want to pass props dynamically to dynamic component in Vue.js.

In this article, we’ll look at how to pass props dynamically to dynamic component in Vue.js.

How to pass props dynamically to dynamic component in Vue.js?

To pass props dynamically to dynamic component in Vue.js, we can check the current component being rendered in component and pass in the props accordingly.

For instance, we write

<template>
  <component :is="currentComponent" v-bind="currentProps"></component>
</template>

<script>
export default {
  //...
  data() {
    return {
      currentComponent: "myComponent",
    };
  },
  computed: {
    currentProps() {
      if (this.currentComponent === "myComponent") {
        return { foo: "baz" };
      }
    },
  },
  //...
};
</script>

to check the value of currentComponent in the currentProps` computed property.

And we return an object with the props we want to pass into the child component.

In the template, we add the component component to render the component that’s set with the name as the value of the is prop.

And we set the v-bind directive to currentProps to pass the properties inside the object as props.

Conclusion

To pass props dynamically to dynamic component in Vue.js, we can check the current component being rendered in component and pass in the props accordingly.

Sometimes, we want to display unescaped HTML in Vue.js.

In this article, we’ll look at how to display unescaped HTML in Vue.js.

How to display unescaped HTML in Vue.js?

To display unescaped HTML in Vue.js, we can set the v-html directive to the reactive property string with the HTML we want to display.

For instance, we write

<template>
  <section v-html="desc"></section>
</template>

to add the v-html directive to the section element and set its value to desc to render as the content of desc as raw HTML.

Conclusion

To display unescaped HTML in Vue.js, we can set the v-html directive to the reactive property string with the HTML we want to display.

Sometimes, we want to listen for props changes with Vue.js

In this article, we’ll look at how to listen for props changes with Vue.js.

How to listen for props changes with Vue.js?

To listen for props changes with Vue.js, we can add a watcher for the prop.

For instance, we write

<script>
export default {
  //...
  watch: {
    myProp: {
      immediate: true,
      handler(val, oldVal) {
        // ...
      },
    },
  },
  //...
};
</script>

to watch the value of the myProp prop by setting watch.myProp to an object with immediate set to true to watch the initial value of the myProp prop.

And we set handler to a function that gets the val and oldVal values to get the new and old value of the myProp prop value respectively.

Conclusion

To listen for props changes with Vue.js, we can add a watcher for the prop.