Looking for some help with Vue and WordPress:
I’m trying to get Vue and PHP to talk with each other and having some trouble. Currently, in the project, we’re creating an anchor for each “resource”
<a v-if="resource.pdf_color"
:href="resource.pdf_color.url"
download
class="btn btn-with-icon icon-file-check"
data-toggle="tooltip"
data-placement="top"
title="Color Download">
<label>Color Download</label>
</a>
However, we would like to use a WP plugin called “Easy Media Download” to limit number of resources downloaded (we’re trying to minimize members signing for one month to download all materials then canceling service).
I’m trying to figure it out how to be able to call the $url resource.pdf_color.url inside the shortcode do_shortcode( '[easy_media_download url=" $url "]' ) and then bind it to the anchor element inside the href argument. I’ve tried a few things but haven’t had much luck.
Any suggestions or ideas on how to solve this?
There are several options to pass variables from a server-side (e.g php, flask etc) to Vue and I'll show you 4 that will work for simple data types (int, strings etc) and with a little more effort, you can also make them work for more complex data types (arrays, objects etc). This example uses python (Flask) but you should be able to easily adapt it to fit PHP. I hope it helps because frankly, you question isn't too clear
Just assign the variable in a script tag
<script type="text/JavaScript">
#some var from flask
var d_var = "{{somevalue}}"
</script>
Then in you vue script, you can do
var vm = new Vue({
el: '#demo',
data: {
d: d_var
...
The remaining step involve assigning the variable to the attribute of a DOM element (e.g a hidden input)
Create a hidden input inside the main vue dom element with its value set to your flask variable
<input name="d_elem" type="hidden" value="{{somevalue}}" id="d_elem" />
Then in your vue script you can now do
var d_var = $("#d_elem").val();
var vm = new Vue({
el: '#demo',
data: {
d: d_var
...
In case you suffer JS library fatigue, just create the hidden input like before but this time you do
var userid3 = document.getElementById("userid2").value;
var vm = new Vue({
el: '#demo',
data: {
d: d_var
...
Create the hidden input with ref attribute
<input name="d_elem" type="hidden" value="{{somevalue}}" ref="d_elem" />
Access it inside vue instance like
var d_var = this.$refs.d_elem.value ;