Category: Vue

Sometimes, we want to pass the selected drop down value to a Vue.js function.

In this article, we’ll look at how to pass the selected drop down value to a Vue.js function.

How to pass the selected drop down value to a Vue.js function?

To pass the selected drop down value to a Vue.js function, we can bind the drop down’s selected value to a reactive property with v-model and then watch that value.

For instance, we write

<template>
  <div id="app">
    <select name="test" v-model="sorting" @change="sortBy">
      <option value="title asc">Title (A-Z)</option>
      <option value="title desc">Title (Z-A)</option>
      <option value="price asc">Price (Min. - Max.)</option>
      <option value="price desc">Price (Max. - Min.)</option>
    </select>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      sorting: null,
    };
  },
  methods: {
    sortBy() {
      console.log(this.sorting);
    },
  },
  //...
};
</script>

to add a select drop down and we bind the drop down’s selected value to the sorting reactive property with v-model.

And then we listen to the change event and run the sortBy method when it’s triggered with

@change="sortBy"

And then we log the latest value of this.sorting inside the method.

Conclusion

To pass the selected drop down value to a Vue.js function, we can bind the drop down’s selected value to a reactive property with v-model and then watch that value.

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.