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插件来限制下载的资源数量（我们试图最小化签名一个月的会员下载所有资料然后取消服务）。

我正在试图找出如何在短代码resource.pdf_color.url中调用$ url do_shortcode( '[easy_media_download url=" $url "]' )，然后将其绑定到href参数内的anchor元素。我尝试过一些东西，但运气不好。

有关如何解决此问题的任何建议或想法？

Answer 1

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

使用内联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元素的属性（例如隐藏输入）

使用jQuery

在主vue dom元素中创建一个隐藏输入，其值设置为flask变量

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

使用普通的旧getElementById

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

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

使用vm。$ refs

使用ref属性

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

在像

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

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

1 个答案: