How to pass props to third-party component?

2
votes

I'm trying to get bliblidotcom/vue-rangedate-picker to work in English.

Thus, I need to pass a prop called: i18n and give it a value of EN.

This is what I did in Orders.vue:

<rangedate-picker :props="props" @selected="onSelect"></rangedate-picker>

And, this is what I did in VueJS code:

import VueRangedatePicker from 'vue-rangedate-picker';
export default {
    props: {
        'i18n': 'us/en',
    },

    components: {
        'rangedate-picker': VueRangedatePicker
    },

    data() {
        return {
            endpoint: '/approve',
            orders: [],

But I receive this error:

dash.66983ac….js:52014 [Vue warn]: Property or method "props" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at C:\Users\bnbih\Projects\business2\api\resources\assets\js\components\orders.vue

1
javascriptlaravel-5vue.jsvuejs2prop

1 Answers

1
votes

You need to pass as i18n, not props

<rangedate-picker :i18n="language" @selected="onSelect"></rangedate-picker>
data() {
  return {
    language: 'en',
    endpoint: '/approve',
    orders: []
  }
}