Category: Vue Answers

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.

Sometimes, we want to open a Vue Router link in a new tab.

In this article, we’ll look at how to open a Vue Router link in a new tab.

How to open a Vue Router link in a new tab?

to open a Vue Router link in a new tab, we can call the $router.resolve method to get the full URL from the route name, path, parameter and query values.

Then we can use window.open to open the URL in a new tab.

For instance, we write

<script>
export default {
  //...
  methods: {
    open() {
      const routeData = this.$router.resolve({
        name: "routeName",
        query: { data: "someData" },
      });
      window.open(routeData.href, "_blank");
    },
  },
  //...
};
</script>

to call this.$router.resolve with the with an object with the route name and the query parameters to return an object that has the href property with the URL resolved from the values.

Then we call window.open with routeData.href and '_blank' to open the URL in a new window.

Conclusion

to open a Vue Router link in a new tab, we can call the $router.resolve method to get the full URL from the route name, path, parameter and query values.

Then we can use window.open to open the URL in a new tab.