Level 8
You can't do that. PHP is rendered on the server. Vue is client side. If you want to send any Vue data to the server you will have to use an AJAX request.
Sep 14, 2015
10
Level 10
How to pass Vue variables to Php functions
I've decided to use pusher and vue.js for my project.
I've this chunk of code in my blade view file:
@foreach($backers as $backer)
<div class="donation-container">
<div class="backer-avatar">{!! backerAvatar($backer->gravatar_user, $backer->name) !!}</div>
<h3>${{number_format($backer->amount)}} <span> by <strong>@if($backer->hide_name=='1') Anonymous @else {{$backer->name}} @endif</strong></span> </h3>
<div class="text-left backer-msg">{{$backer->message}}</div>
<span class="time_stamp text-left">- {{Carbon::createFromTimeStamp(strtotime($backer->created_at))->diffForHumans()}}</span>
</div>
@endforeach
and Im using Vue to push contents like this:
<div id="showNewDonation" class="donation-container">
<div v-repeat="backer: backers">
<h3>@{{ backer.backer.amount }} <span> <strong> @{{ backer.backer.name }} </strong></span> </h3>
<div class="text-left backer-msg">@{{ backer.backer.message }}</div>
</div>
</div>
But how can I pass certain Vue variables to php functions such as :
{{Carbon::createFromTimeStamp(strtotime(backer.backer.created_at))->diffForHumans()}}
Level 10
@jakeryansmith I see. Also, when I load the HTML page, I can see the {{ backer.backer.amount }} and similar Vue related variables for a couple of seconds and then disappear. I tried changing the positions of the js file and it didn't work. Is there any option for that?
Level 5
Hi There.
You can't, i'm afraid! The Carbon PHP snippet runs when your template is rendered on the server in PHP, and won't allow you to pass in data from the client-side javascript.
You would have to replicate this logic in javascript, then apply it to your data using a custom filter.
Then, when Vue renders your template tag, it will filter the created_at property into a similar string that ->diffForHumans() produces, and you would be able to use it something like:
@{{ backer.backer.created_at | diff_for_humans }}
Hope this helps - if you need help manipulating dates in Javascript, check out the Moment.js library.
Level 10
@danmatthews : Thanks, what about the Vue variables displayed for a fraction of second when the page loads?
Level 8
Are you sure your Vue instance has data? Try outputting your data in your view like this @{{ $data | json }} this will show all the data in your Vue instance. There might not be any data in 'backers'.
Level 10
@jakeryansmith : Inititally the Vue data is empty. That's when I get the mustache-style bindings.
Level 8
I'm not sure of any option to control this, in fact I'm not sure what else you can do besides hide it with CSS and then in the ready function on your Vue instance you could modify the css so it displays. You could even apply a nice CSS transition this way.
Level 10
@jakeryansmith Thanks a lot.
Level 51
You can use the v-cloak directive (http://vuejs.org/api/directives.html#v-cloak) to hide the application until everything is ready
Level 10
@D9705996 : Thanks for this :)
Please or to participate in this conversation.