使用 JQuery 在 PHP 中访问 Vue JS 组件数据

Posted 2023-02-22

【中文标题】使用 JQuery 在 PHP 中访问 Vue JS 组件数据

【英文标题】：Accessing Vue JS component data inside PHP using JQuery

【发布时间】：2020-12-08 10:57:46

【问题描述】：

我有一个 vue js 应用程序，它在我的 php 项目中自己的环境中编译和渲染。我使用的是旧版本的 PHP 框架，而不是 Laravel。

我的 vue js 应用实例是在 main.js 文件中创建的

Vue.component(
    'Dashboard',
    require('./components/dashboard/Index.vue').default
);
console.log(window.location);
const router = new VueRouter(
    mode: "history",
    base: window.location.pathname,
);

var myVueInstance = new Vue(
    router
).$mount('#app');

然后我在项目的结束标记之前使用这个编译的 vue js 应用程序。

<script src="<?php echo getenv('APP_DEBUG') == 'false'
    ? Yii::app()->baseUrl.'/js/vue/js/main.min.js'
    : 'http://localhost:8080/js/main.js' ?>"></script>

问题是我正在尝试使用 ref 名称在其中一个组件内注入和设置数据键，但我无法获取任何设置键的东西。

<div id="app">
    <quote-upload ref="quoteUpload"></quote-upload>
    <view-quote ref="viewQuote"></view-quote>
    <invoice-upload ref="invoiceUpload"></invoice-upload>
</div>

var self = this;
$(document).on("click", ".openQuoteModal", function () 
    myVueInstance.$refs.quoteUpload.vehicleid = $(this).data('id'); //this doesnt work.
); 

但我无法这样做，因为它总是未定义。

有什么办法吗？

【问题讨论】：

你的最后一个脚本是在 Vue main.js 之前还是之后执行的？

@cHida 之前。 main.js 编译后的代码在结束 body 标签之前是页尾

因此，您的脚本在 Vue 实例化之前执行。尝试放在 main.js 之后

@cHida 我已经这样做了，但它说“myVueInstance”未定义。

【参考方案1】：

我尝试了以下方法，但我的 vue 实例变量仍然未定义。奇怪是因为它在我做的调用之上。

当 vue 组件被挂载时，我最终监听了 vue 组件本身的点击。我在点击时获得了值，然后在组件内部设置了vehicleid。

  mounted() 
    var self = this;
    this.$nextTick(() => 
      $(document).on("click", ".quoteUploadModal", function()
        self.vehicleid = $(this).closest('.openQuoteModal').data('id');
      );
    );
  ,