如何将PHP变量传递给Vue指令

Question

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?

Answer 1

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

1. Use inline JavaScript

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)

1. Use jQuery

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
  ...

1. Use plain old getElementById

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
  ...

1. Use vm.$refs

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 ;