Guide on incorporating vanilla JavaScript into a personalized Vue component

Question

Guide on incorporating vanilla JavaScript into a personalized Vue component

I'm currently working on incorporating a basic date-picker into a custom Vue component. Since I am not utilizing webpack, I want to avoid using pre-made .vue components and instead focus on understanding how to incorporate simple JavaScript into Vue.

For guidance, I have been referring to this official Vue tutorial

I also came across this codepen example, but I am struggling to get the date picker to display properly.

You can view my current progress on jsfiddle:

HTML:

<div class="app">
  <datepicker id='date-elem'></datepicker>
</div>

app.js:

Vue.component('date-picker', {
  extends: Flatpickr,
  mounted () {
    this.Flatpickr(date-elem, {})}
})

What is the best way to integrate vanilla JavaScript into a Vue component without relying on .vue files or webpack?

javascript vue.js vuejs2 vue-component flatpickr

Answer 1

Answer №1

It seems there are some misunderstandings in your approach. To create a basic component, you can follow these steps.

In Vue, the typical way to incorporate an external JavaScript library is by creating a wrapper component. This component will manage all the interactions with the external library. For example, if you want to utilize Flatpickr, according to the documentation, you need to use new Flatpickr(element, options). You can achieve this within the mounted event by passing this.$el, which references the root element of the Vue component.

Vue.component('date-picker', {
    template: "<input type='text'>",
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

You can find the updated fiddle here.

However, the current component has limited functionality as it only allows date selection. To enable the selected date to be accessed from outside the component using v-model, you can extend the component as follows:

Vue.component('date-picker', {
    props:["value"],
    data(){
        return {
            selectedDate: this.value
        }
    },
    template: "<input type='text' v-model='selectedDate' @input='onInput'>",
    methods:{
        onInput(){
            this.$emit('input', this.selectedDate)
        }
    },
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

Now, you can use the component in this manner:

<date-picker v-model="selectedDate"></date-picker>

The selectedDate variable will capture the chosen date.

You can refer to this fiddle for demonstration.

Answer 2

It seems there are some misunderstandings in your approach. To create a basic component, you can follow these steps.

In Vue, the typical way to incorporate an external JavaScript library is by creating a wrapper component. This component will manage all the interactions with the external library. For example, if you want to utilize Flatpickr, according to the documentation, you need to use new Flatpickr(element, options). You can achieve this within the mounted event by passing this.$el, which references the root element of the Vue component.

Vue.component('date-picker', {
    template: "<input type='text'>",
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

You can find the updated fiddle here.

However, the current component has limited functionality as it only allows date selection. To enable the selected date to be accessed from outside the component using v-model, you can extend the component as follows:

Vue.component('date-picker', {
    props:["value"],
    data(){
        return {
            selectedDate: this.value
        }
    },
    template: "<input type='text' v-model='selectedDate' @input='onInput'>",
    methods:{
        onInput(){
            this.$emit('input', this.selectedDate)
        }
    },
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

Now, you can use the component in this manner:

<date-picker v-model="selectedDate"></date-picker>

The selectedDate variable will capture the chosen date.

You can refer to this fiddle for demonstration.

Guide on incorporating vanilla JavaScript into a personalized Vue component

Answer №1

Similar questions

Is there a way to determine the duration that a click was held down for?

Error handling in angularJS can be quite challenging at times,

Pass the callback function `cb_func` as a parameter to the `foobar` function when calling it in the `onclick`

Using conditional logic to check if a column cell is empty

The aggregation pipeline in nodeJS with mongoDB is failing to return any results, returning an empty array instead

Run a function upon clicking a button in JavaScript

Access a file from a specified route within Express

Can an image map be utilized within an <a> element?

What is the best way to pass and save information across different routes in Express using Node.js?

live PHP recording of data moving between tables

How can I assign a value other than a string to a placeholder or vue property?

Creating modules or classes in ExpressJS

Collision detection in Physisjs with Three.js PointerLockControls is an essential feature for creating

When activated, JavaScript is producing an undefined response

Having trouble accessing data from MongoDB using Node.js and Express

Display or conceal HTML content based on the input's property type

What is preventing me from updating specific packages to the latest version using vue ui / npm?

The HTML form submission button fails to submit the form and instead just refreshes the page

Displaying only the records that are associated with the user using Laravel's relationships

Is it possible to change the src attribute after the page has loaded and execute it