Need to understand VUE Property or method "range" is not defined on the instance but refer-CodePudding

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>

CodePudding user response：

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"