Category: JavaScript

Sometimes, we want to add dynamic attribute in Vue.js.

In this article, we’ll look at how to add dynamic attribute in Vue.js.

How to add dynamic attribute in Vue.js?

To add dynamic attribute in Vue.js, we can use the v-bind directive or : for short.

For instance, we write

<template>
  <div id="app">
    <input
      type="text"
      :disabled="disabled"
      :placeholder="placeholder"
      v-model="value"
    />
  </div>
</template>

to set the disabled prop to the value of the disabled reactive property and placeholder to the placeholder reactive property.

Changes in those values will cause the input to re-render.

Conclusion

To add dynamic attribute in Vue.js, we can use the v-bind directive or : for short.

Sometimes, we want to get the old value when on change event with Vue.js.

In this article, we’ll look at how to get the old value when on change event with Vue.js.

How to get old value when on change event with Vue.js?

To get the old value when on change event with Vue.js, we can get the value from the 2nd parameter of the watcher.

For instance, we write

<script>
//...
export default {
  watch: {
    clonedItems: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(JSON.stringify(newVal));
        console.log(JSON.stringify(oldVal));
      },
    },
  },
  //...
};
</script>

to get the old value of the clonedItems reactive property from the oldVal parameter.

Conclusion

To get the old value when on change event with Vue.js, we can get the value from the 2nd parameter of the watcher.

Sometimes, we want to filter input text only accept number and dot with Vue.js.

In this article, we’ll look at how to filter input text only accept number and dot with Vue.js.

How to filter input text only accept number and dot with Vue.js?

To filter input text only accept number and dot with Vue.js, we can listen for the keypress event and validate the input in the keypress event handler.

For instance, we write

<template>
  <div id="app">
    <input v-model="message" @keypress="isNumber($event)" />
  </div>
</template>

<script>
//...
export default {
  data() {
    return {
      message: 1234.34,
    };
  },
  methods: {
    isNumber(evt) {
      const charCode = evt.keyCode;
      if (
        charCode > 31 &&
        (charCode < 48 || charCode > 57) &&
        charCode !== 46
      ) {
        evt.preventDefault();
      } else {
        return true;
      }
    },
  },
};
</script>

to add the input with the @keypress directive to listen to the keypress event.

We run isNumber if we enter anything into the input.

In it, we check if the key codes aren’t in the ranges for numbers and the period.

If it’s not, we call preventDefault to discard the characters.

Otherwise, we return true to keep them.

Conclusion

To filter input text only accept number and dot with Vue.js, we can listen for the keypress event and validate the input in the keypress event handler.

Sometimes, we want to add global variables in Vue.js 3.

In this article, we’ll look at how to add global variables in Vue.js 3.

How to add global variables in Vue.js 3?

To add global variables in Vue.js 3, we add properties to the app.config.globalProperties object.

For instance, we write

const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable

to create a Vue app with Vue.createApp.

Then we add the $myGlobalVariable variable and set it to globalVariable with

app.config.globalProperties.$myGlobalVariable = globalVariable

Then in our components, we can access the global variable with

this.$myGlobalVariable

Conclusion

To add global variables in Vue.js 3, we add properties to the app.config.globalProperties object.

Sometimes, we want to use local storage with Vue.js.

In this article, we’ll look at how to use local storage with Vue.js.

How to use local storage with Vue.js?

To use local storage with Vue.js, we can use the localStorage.getItem and localStorage.setItem methods.

For instance, we write

localStorage.getItem('YourItem')

in our component code to return the local storage entry with the 'YourItem' key.

And we write

localStorage.setItem('YourItem', response.data)

to call localStorage.setItem to save a local storage entry with key 'YourItem' and response.data as the entry’s value.

Conclusion

To use local storage with Vue.js, we can use the localStorage.getItem and localStorage.setItem methods.