Category: Vue Answers

Sometimes, we want to use $watch on an array of objects with Vue.js.

In this article, we’ll look at how to use $watch on an array of objects with Vue.js.

How to use $watch on an array of objects with Vue.js?

To use $watch on an array of objects with Vue.js, we can call add a watcher with the deep option set to true.

For instance, we write

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

to watch the things array reactive property for changes.

We set the deep option to true to watch all nested content in the array for changes.

And then we get the latest value for things in val and the previous value of it with oldVal.

Conclusion

To use $watch on an array of objects with Vue.js, we can call add a watcher with the deep option set to true.

Sometimes, we want to add a Google Font to a Vue.js component.

In this article, we’ll look at how to add a Google Font to a Vue.js component.

How to add a Google Font to a Vue.js component?

To add a Google Font to a Vue.js component, we can imnport it in our CSS.

For instance, we write

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

html,
body {
  font-family: "Roboto", sans-serif;
}

#app {
  font-family: "Roboto", sans-serif;
}

in the style tag of a component to import the Roboto font with

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

Then we can set the font-family to Roboto in the elements we want.

Conclusion

To add a Google Font to a Vue.js component, we can imnport it in our CSS.

Sometimes, we want to change the default base URL for Axios.

In this article, we’ll look at how to change the default base URL for Axios.

How to change the default base URL for Axios?

To change the default base URL for Axios, we can set the baseUrl option when we’re calling our axios instance.

For instance, we write

this.$axios({ url: "items", baseURL: "http://new-url.com" });

to call this.$axios with an object with the baseURL to a different URL than the one that’s set when we’re creating the axios instance.

Conclusion

To change the default base URL for Axios, we can set the baseUrl option when we’re calling our axios instance.

Sometimes, we want to delete property from a data object with Vue.js.

In this article, we’ll look at how to delete property from a data object with Vue.js.

How to delete property from a data object with Vue.js?

To delete property from a data object with Vue.js, we can use the this.$delete method.

For instance, we write

this.$delete(this.users, "foo");

in our component to remove the foo property from the this.users object.

Conclusion

To delete property from a data object with Vue.js, we can use the this.$delete method.

Sometimes, we want to set background color with Vuetify

In this article, we’ll look at how to set background color with Vuetify.

How to set background color with Vuetify?

To set background color with Vuetify, we can add our own theme colors.

For instance, we write

import Vue from "vue";
import Vuetify from "vuetify/lib";
import colors from "vuetify/lib/util/colors";

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5,
        //...
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base,
        //...
      },
    },
  },
});
//...

to add the background color in addition to the existing theme colors.

Then we can apply the background color by writing

<template>
  <v-app
    id="main"
    :style="{ background: $vuetify.theme.themes[theme].background }"
  >
    <v-content> ... </v-content>
  </v-app>
</template>

where theme is the property key that we have in themes.

Conclusion

To set background color with Vuetify, we can add our own theme colors.