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

【问题标题】：Accessing Vue JS component data inside PHP using JQuery使用 JQuery 在 PHP 中访问 Vue JS 组件数据
【发布时间】：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”未定义。

标签： php jquery vue.js

【解决方案1】：

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

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

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

【讨论】：