Accessing Vue JS component data inside PHP using JQuery

user_1805468 0
Viewed 279

I have a vue js application which is compiled and rendered in its own enviroment within my php project. I use a old version of a PHP framework and not Laravel.

My vue js application instance is created in the main.js file

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');

and then i use this compiled vue js application just before the closing tag in my project.

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

The issue is that i am trying to inject and set a data key inside one of the components using the ref name but i cannot get hold of anything to set the key.

<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.
});

but i am unable to do so as it is always undefined.

Is there any way to do this?

vue.js php jquery
1 Answers

I tried the following but still got the my vue instance variable was undefined. Strange that it is because it is above the call i do.

I tried the following but still got the my vue instance variable was undefined. Strange that it is because it is above the call i do.

I ended up listen for the click within the vue component itself when the vue component got mounted. I got the value on click and then set the vehicleid internally within the component.

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