how to use a sent variable from php into vue.js

Question

i am already sending a variable from laravel to my vuejs like below : but when i want to use it in a component as an string it gives not defined error my vue component code is like below

 export default {
        props: ['reserve_end'],
        data(){
            return {
                date: '',


            }
        },
}
// the component part
 import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
    Vue.use(VuePersianDatetimePicker, {
        name: 'custom-date-picker',
        props:
            {
                min: //i want to use the reserve_end here as an string


            }
    });

and finally the html markup

                    <custom-date-picker v-model="date"></custom-date-picker>

but in the end it wont load and gives error that reserve_end is not defined i want to know how can i pass this reserve_end to the datepicker as an string here is the devtoll picture of tracing

Are you sure you got the passing right? Tried with Vue devtools inspection? — Benjamin Beganović
– Benjamin Beganović, Commented Mar 27, 2019 at 19:59
Yes i even print it but i cant access it from the above so i get the error — Farshad
– Farshad, Commented Mar 27, 2019 at 19:59
In that case, just pass the prop to the component: <custom-date-picker :min="date"></custom-date-picker>, with second binding, or just directly like :min="reserve_end". — Benjamin Beganović
– Benjamin Beganović, Commented Mar 27, 2019 at 20:02
Well, anytime, you passing something you can do like, variable.toString();. — Benjamin Beganović
– Benjamin Beganović, Commented Mar 27, 2019 at 20:10
So, i I get it, you are passing value from Laravel to one component, and then to date-picker, right? :) — Benjamin Beganović
– Benjamin Beganović, Commented Mar 27, 2019 at 20:17

Benjamin Beganović · Accepted Answer · 2019-03-27 20:25:02Z

1

// First component (getting value from Laravel): export default { props: ['reserve_end'] }

Now, in the first component, you should have an access to this.reserve_end.

// template of first component <template> <second-component :date="reserve_end"></second-component> </template>

Let's pass the value to another component, using same technique - props.

// Second component (getting value from first component export default { props: ['date'] }

Now, in the second, component we can:

{{ date }}, to get the date :)

However, don't forget to inspect each component Vue devtools.

answered Mar 27, 2019 at 20:25

Benjamin Beganović

1,1781 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Farshad Over a year ago

acctualy its one component and one plugin that i exported so i want to pass data from the export default to vue.use(datepicker) , my last question is how can i receive the reserve_end in the props of downpart

Benjamin Beganović Over a year ago

'plugin' is yet another component, ready-to-get embeded into any sistem. Just as you would pass data from your own components, same should work for the 'plugins'.

Collectives™ on Stack Overflow

how to use a sent variable from php into vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related