CODEWITHSUNDEEP
vue.jsvuejs2laravel-blade
Pwntastic
Pwntastic

Reputation: 481

Passing php variables as props to vue component

I've checked out a few other posts about this issue but their solution doesn't seem to fix my problems.

These syntax all work for me to get the value of the variable:

:venueIdProp=" <?php echo $id ?> " :venueIdProp=" {{ $id }} " :venueIdProp=" {!! $id !!} "

however when passing the prop down it shows as undefined.

//Test will show up when passing test="test"

<template>
    <div> {{venueIdProp}} {{test}} </div> 
</template>

module.exports = {
    props: ['venueIdProp', 'test'],
    data: () => {
        return {}
  },
  mounted(){
    console.log(this.venueIdProp) // returns undefined
  }
}

Php File

@extends('layouts.admin')


@section('content')

    <div id="VenueApp">
        <venue-app venueIdProp="{{ $id }}"></venue-app>
    </div>

    <script>
        new Vue({
            el: "#VenueApp",
            components: {
                "venue-app": httpVueLoader("/js/Vue/screens/venue/VenueApp.vue")
            }
        })
    </script>

@endsection

Is there something Im doing wrong with the prop?

Upvotes: 0

Views: 2117

Answers (1)

Saa
Saa

Reputation: 1615

https://v2.vuejs.org/v2/guide/components-props.html

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents.

Try:

<venue-app venue-id-prop="{{ $id }}"></venue-app>

Or if you need the prob to be a Javascript number:

<venue-app :venue-id-prop="{{ $id }}"></venue-app>

Upvotes: 2

Related Questions