I recently started using Vue and decided to incorporate a plugin called vue-toastr. I'm attempting to integrate it with Laravel, which already has Vue set up with the plugin. Unfortunately, I keep encountering an error that says "TypeError: Cannot read property '$toastr' of undefined". As a newcomer to Vue, I am struggling to identify where I went wrong.
Here are the steps I followed:
1. Installed the plugin via npm.
In my app.js file:
require('./bootstrap');
import VueToastr from "vue-toastr";
window.Vue = require('vue');
Vue.use(VueToastr, {});
Vue.component('new-question', require('./components/questions/NewQuestion.vue').default);
const app = new Vue({
el: '#app',
});
Below is the JavaScript section of my Vue component:
<script>
import VueToastr from "vue-toastr";
export default {
props: [
'route',
'method'
],
components: {
VueToastr
},
data(){
return {
// Initialized to zero to begin
form: {},
}
},
mounted() {
},
methods: {
formSubmit: function(){
console.log('form submit');
axios({
method: this.method,
url : this.route,
data : this.form
}).then(function (response) {
console.log(response);
this.$toastr.s("ssss");
//this.VueToastr.s("ssss");
}).catch(function (error) {
console.log(error);
});
}
}
}
</script>
Any assistance will be highly appreciated.