Category: Vue Answers

Sometimes, we want to implement DataTables in Vue.js.

In this article, we’ll look at how to implement DataTables in Vue.js.

How to implement DataTables in Vue.js?

To implement DataTables in Vue.js, we create it with a ref and the DataTable method.

For instance, we write

const dT = $(this.$refs.table).DataTable();
dT.destroy();

We get the element we want the table to be in with this.$refs.table.

And then we call $ with it to return a jQuery object and call DataTable with the jQuery object.

Then we update it with the data with

await this.$nextTick();
$(this.$refs.table).DataTable({
  //...
});

in our code when the data is ready.

this.$nextTick makes the method wait for reactive properties to be updated before running the code after it.

Conclusion

To implement DataTables in Vue.js, we create it with a ref and the DataTable method.

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.