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

Question

在 Vue 和 WordPress 方面寻求帮助：

我正在尝试让 Vue 和 PHP 相互交流，但遇到了一些麻烦。目前，在项目中，我们正在为每个“资源”创建一个锚点

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

但是，我们想使用一个名为“Easy Media Download”的 WP 插件来限制下载资源的数量（我们正在尽量减少会员签署一个月以下载所有材料然后取消服务）。

我试图弄清楚如何能够在短代码 do_shortcode( '[easy_media_download url=" $url "]' ) 中调用 $url resource.pdf_color.url，然后将其绑定到 href 参数中的锚元素。我尝试了几件事，但运气不佳。

关于如何解决这个问题的任何建议或想法？

Answer 1

有几个选项可以将变量从服务器端（例如 php、flask 等）传递到 Vue，我将向您展示 4 个适用于简单数据类型（int、字符串等）的选项，并且需要更多的努力，您还可以使它们适用于更复杂的数据类型（数组、对象等）。此示例使用 python (Flask)，但您应该能够轻松地对其进行调整以适应 PHP。 我希望它有所帮助，因为坦率地说，你的问题不太清楚

1. 使用内联 JavaScript

只需在脚本标签中分配变量

<script type="text/JavaScript"> 
 #some var from flask
  var d_var = "{{somevalue}}" 
 </script>

然后在你的 vue 脚本中，你可以这样做

var vm = new Vue({
  el: '#demo',
  data: {
  d: d_var
  ...

剩下的步骤涉及将变量分配给 DOM 元素的属性（例如隐藏的输入）

1. 使用 jQuery

在主 vue dom 元素内创建一个隐藏输入，并将其值设置为您的烧瓶变量

<input name="d_elem" type="hidden" value="{{somevalue}}" id="d_elem" />

然后在你的 vue 脚本中你现在可以做

var d_var = $("#d_elem").val(); 
var vm = new Vue({
  el: '#demo',
  data: {
  d: d_var
  ...

1. 使用普通的旧 getElementById

如果你遇到 JS 库疲劳，只需像以前一样创建隐藏输入，但这次你做

 var userid3 =  document.getElementById("userid2").value;
 var vm = new Vue({
  el: '#demo',
  data: {
  d: d_var
  ...

4. 使用 vm.$refs

使用 ref 属性创建隐藏输入

<input name="d_elem" type="hidden" value="{{somevalue}}" ref="d_elem" />

像在 vue 实例中一样访问它

var d_var = this.$refs.d_elem.value ;