Category: Vue Answers

Sometimes, we want to reset a component’s initial data in Vue.js.

In this article, we’ll look at how to reset a component’s initial data in Vue.js.

How to reset a component’s initial data in Vue.js?

To reset a component’s initial data in Vue.js, we can create a function that returns the initial data.

Then we can call the function to reset the data.

For instance, we write

<script>
const initialState = () => {
  return {
    modalBodyDisplay: "getUserInput",
    submitButtonText: "Lookup",
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location: {
      name: null,
    },
  };
};

export default {
  data() {
    return initialState();
  },

  methods: {
    reset() {
      Object.assign(this.$data, initialState());
    },
  },
};
</script>

to create the initialState function that returns an object with the initial data.

Then in data, we return the object returned by initialState to return the properties as the initial data.

Finally, in reset, we call Object.assign to merge the properties returned by initialState into this.$data to reset the reactive property values.

Conclusion

To reset a component’s initial data in Vue.js, we can create a function that returns the initial data.

Then we can call the function to reset the data.

Sometimes, we want to call multiple functions with @click in Vue.js.

In this article, we’ll look at how to call multiple functions with @click in Vue.js.

How to call multiple functions with @click in Vue.js?

To call multiple functions with @click in Vue.js, we can set @click to all the function calls separated by semicolons.

For instance, we write

<template>
  <div
    @click="
      firstFunction();
      secondFunction();
    "
  ></div>
</template>

to call firstFunction and secondFunction when we click on the div by setting @click to

firstFunction();
secondFunction();

Conclusion

To call multiple functions with @click in Vue.js, we can set @click to all the function calls separated by semicolons.

Sometimes, we want to use Axios globally in all components Vue.js.

In this article, we’ll look at how to use Axios globally in all components Vue.js.

How to use Axios globally in all components Vue.js?

To use Axios globally in all components Vue.js, we can add axios into the Vue prototype.

For instance, we write

import axios from 'axios'

Vue.prototype.$http = axios ;

in main.js so that all Vue component instances will have this.$http set to axios.

Conclusion

To use Axios globally in all components Vue.js, we can add axios into the Vue prototype.

Sometimes, we want to filter a list with Vue.js.

In this article, we’ll look at how to filter a list with Vue.js.

How to filter a list with Vue.js?

To filter a list with Vue.js, we can use a computed property.

For instance, we write

<template>
  <div id="app">
    <div v-for="item in filteredItems">
      <p>{{ item.name }}</p>
    </div>

    <input type="text" v-model="search" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      items: [
        { name: "for dummies", type: "book" },
        { name: "finding nemo", type: "movie" },
        { name: "leonardo di caprio", type: "actor" },
      ],
    };
  },

  computed: {
    filteredItems() {
      return this.items.filter((item) => {
        return item.type.toLowerCase().includes(this.search.toLowerCase());
      });
    },
  },
};
</script>

to define the search and items reactive properties.

Then we define the filteredItems computed property that returns an array that has the values from items that matches what’s being typed in the input.

This is because we bound the search reactive property to the input value with v-model.

We call toLowerCase on item.type and search to do a case insensitive comparison.

In the template, we render the filteredItems items with v-for.

Conclusion

To filter a list with Vue.js, we can use a computed property.

Sometimes, we want to set the HTML title element content in Vue.js.

In this article, we’ll look at how to set the HTML title element content in Vue.js.

How to set the HTML title element content in Vue.js?

To set the HTML title element content in Vue.js, we can use the vue-meta package.

To install it, we run

npm i vue-meta

Then we add it as a plugin with

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta)

Next, in our component, we write

<template>
  <div id="app">
...  </div>
</template>

<script>
  export default {
    name: 'App',
    metaInfo: {
      title: 'Title',
      titleTemplate: '%s | My Website'
    }
  }
</script>

to set the metaInfo property to an object with the title properties.

titleTemplate has the template of the title with %s being the placeholder that’s interpolated with the metaInfo.title value.

Conclusion

To set the HTML title element content in Vue.js, we can use the vue-meta package.