I'm facing an issue with passing props from the HTML to the JavaScript code and then down to a Vue component.
Here's a snippet of my index.html file:
<div id="js-group-discounts">
<div class="form-group required">
<datepicker
input-label="From">
</datepicker>
</div>
<div class="form-group required">
<datepicker
input-label="To">
</datepicker>
</div>
</div>
And here's what I have in my JavaScript file:
import Vue from "vue"
import Datepicker from "../components/DatePicker"
Vue.use(Datepicker)
new Vue({
el: "#js-group-discounts",
props: {
inputLabel: {
type: String,
},
},
components: {
Datepicker,
},
mount: {
console.log(this.inputLabel) // returns undefinend
},
})
This snippet shows the child component, Datepicker:
<template>
<div >
<label for="for">label</label>
<input type="text"
class="form-control form-control-info"
placeholder="dd/mm/yyyy"
name="this.label"
id="this.label"
pattern="\d{1,2}/\d{1,2}/\d{4}"
required
v-model="isInput"
v-on:keyup="updateCalendar($event)"
ref="startdate"
@blur="blur"
@focus="focus">
<datepicker format="dd/MM/yyyy"
id="start_calendar"
input-class="form-control"
placeholder="dd/mm/yyyy"
v-model="isPicker"
:inline="true"
v-show="isOpen"
@mouseover.native="mouseOver"
@selected="updateInput"></datepicker>
</div>
</template>
<script>
import Vue from "vue"
import Datepicker from "vuejs-datepicker"
Vue.use(Datepicker)
export default {
name: "datepicker",
components: {
Datepicker
},
}
I am struggling to pass this value from the HTML down to a child component. Any suggestions or help would be greatly appreciated.