Home Need to understand VUE Property or method "range" is not defined on the instance but referenced during render

Questions

Need to understand VUE Property or method "range" is not defined on the instance but referenced during render

May 25, 2022

I need help understanding why the error would show. An example is when I use vue2-daterange-picker.

<date-range-picker
  :singleDatePicker="range"
>
</date-range-picker>

So singleDatePicker is a prop correct? Why is it if I pass the value into the component this way, it returns the error, but if I add the value, range into data it doesn’t? eg

<template>
  <date-range-picker
    :singleDatePicker="singleDatePicker"
  >
  </date-range-picker>
</template>

<script>  
export default {
  components: {
    DateRangePicker
  },
  data () {
    return {
      singleDatePicker: "range",
    }
  },
}
</script>

>Solution :

With : (it’s the same as v-bind) you are binding value, and range is not defined, so if you want to put data directly in your prop singleDatePicker="range"