Using the ref attribute with dom element outside a VueJS 2 component template

2
votes

I am currently struggling with referencing existing DOM elements with VueJS.

I have an existing date input rendered from the applications twig template and a separate VueJS widget i integrated.

<input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30">

The date input field is NOT inside the components template, but within the VueJS application (having id="#app").

For data-binding i would like to use the ref attribute to connect the VueJS component with my date input field inside the components template (e.g. for initialization with values coming from the application):

mounted() {
  componentsTimeValue: this.$refs["date_time_1"].value;
}

getting undefined here.

Is there a way to connect "existing" DOM elements (that are not created with vue), with vue components using the ref attribute at all?

1
vue.jsvuejs2vue-component

1 Answers

3
votes

Though not a good practise because #div container is handed over to vue for manipulation but still you can reference the dom that weren't created by vue but lie inside #app

For that you must reference properly, so if you are in some child component you use

mounted() {
  componentsTimeValue: this.$root.$refs["date_time_1"].value;
}