Category: Vue

Sometimes, we want to load all server side data on initial Vue.js or Vue Router load.

In this article, we’ll look at how to load all server side data on initial Vue.js or Vue Router load.

How to load all server side data on initial Vue.js or Vue Router load?

To load all server side data on initial Vue.js or Vue Router load, we can run the initialization code in the beforeCreate hook.

For instance, we write

<script>
//...
export default {
  //...
  beforeCreate() {
    store.dispatch("initialize", comms);
  },
  //...
};
</script>

to call store.dispatch with the 'initialize' action and load all the initialzation code in the iniitlaize action.

store is a Vuex store.

Conclusion

To load all server side data on initial Vue.js or Vue Router load, we can run the initialization code in the beforeCreate hook.

Sometimes, we want to use computed property with v-for in Vue.js.

In this article, we’ll look at how to use computed property with v-for in Vue.js.

How to use computed property with v-for in Vue.js?

To use computed property with v-for in Vue.js, we can use computed properties like any other reactive properties.

For instance, we write

<template>
  <div>
    <p v-for="name in fullNames" :key="name">
      <span>{{ name }}</span>
    </p>
  </div>
</template>

<script>
//...
export default {
  //...
  computed: {
    fullNames() {
      return this.items.map((item) => {
        return `${item.firstName} ${item.lastName}`;
      });
    },
  },
  //...
};
</script>

to create the fullNames computed property that returns an array.

Then in the template, we render the items in fullNames with v-for.

We set the key prop to a unique value in fullNames.

Conclusion

To use computed property with v-for in Vue.js, we can use computed properties like any other reactive properties.

Sometimes, we want to remove hash bang #! from URL with Vue.js and Vue Router.

In this article, we’ll look at how to remove hash bang #! from URL with Vue.js and Vue Router.

How to remove hash bang #! from URL with Vue.js and Vue Router?

To remove hash bang #! from URL with Vue.js and Vue Router, we can set the VueRouter‘s mode to 'history'.

For instance, we write

const router = new VueRouter({
  mode: "history",
});

to create a VueRouter instance by calling VueRouter with an object with the mode property set to 'history'.

Conclusion

To remove hash bang #! from URL with Vue.js and Vue Router, we can set the VueRouter‘s mode to 'history'.

Sometimes, we want to pass props to Vue.js components instantiated by Vue Router.

In this article, we’ll look at how to pass props to Vue.js components instantiated by Vue Router.

How to pass props to Vue.js components instantiated by Vue Router?

To pass props to Vue.js components instantiated by Vue Router, we can pass the prop value to router-view.

For instance, we write

<template>
  <router-view :someProp="someProp"></router-view>
</template>

to pass the someProp to router-view.

Then we can register it from any route component with

<script>
//...
export default {
  //...
  props: {
    someProp: String,
  },
  //...
};
</script>

to register someProp in a route component.

Conclusion

To pass props to Vue.js components instantiated by Vue Router, we can pass the prop value to router-view.

Sometimes, we want to add conditional class style binding with Vue.js.

In this article, we’ll look at how to add conditional class style binding with Vue.js.

How to add conditional class style binding with Vue.js?

To add conditional class style binding with Vue.js, we can set the :class prop.

For instance, we write

<template>
  <div
    :class="{
      'fa-checkbox-marked': content.cravings,
      'fa-checkbox-blank-outline': !content.cravings,
    }"
  ></div>
</template>

to set the class prop to an object that applies the fa-checkbox-marked class is content.cravings is true.

And we apply the fa-checkbox-blank-outline class if content.cravings is false.

Conclusion

To add conditional class style binding with Vue.js, we can set the :class prop.