duanchi0883649 2017-09-08 20:58
浏览 765
已采纳

如何将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 2017-09-28 02:32
    关注

    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 ;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题
  • ¥15 代码问题:df = pd.read_excel('c:\User\18343\Desktop\wpsdata.xlxs')路径读不到
  • ¥15 为什么视频算法现在全是动作识别?
  • ¥15 编写一段matlab代码
  • ¥15 用Python做岩石类别鉴定软件
  • ¥15 关于调取、提交更新数据库记录的问题
  • ¥15 之前删了盘从下vs2022遇见这个问题 搞了一整天了
  • ¥15 从Freecad中宏下载的DesignSPHysics,出现如下问题是什么原因导致的(语言-python)