duanchi0883649
duanchi0883649
2017-09-08 20:58

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

已采纳

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?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • douwen9540 douwen9540 4年前

    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 ;
    
    点赞 评论 复制链接分享