[英]How to implement your own action buttons using the vue-slick package
[英]How to implement vue package
Vue 中的新功能並嘗試使用名為 vue-toastr 的插件。 嘗試與 Laravel 和 Vue 一起使用已經設置好了。 但是,我收到一條錯誤消息,指出“TypeError:無法讀取未定義的屬性 '$toastr'”。 我是 Vue 的新手,我發現很難弄清楚我做錯了什么。
我采取的步驟。 通過 npm 安裝插件。
應用程序.js
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',
});
下面是我的 Vue 組件的 JS 部分。
<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>
任何幫助是極大的贊賞
替換為此(添加var self = this;
):
formSubmit: function(){
console.log('form submit');
var self = this;
axios({
method: this.method,
url : this.route,
data : this.form
}).then(function (response) {
console.log(response);
self.$toastr.s("ssss");
//this.VueToastr.s("ssss");
}).catch(function (error) {
console.log(error);
});
}
更新。
此外,您可以像這樣使用箭頭函數作為回調:
formSubmit: function(){
console.log('form submit');
axios({
method: this.method,
url : this.route,
data : this.form
}).then((response) => {
console.log(response);
this.$toastr.s("ssss");
//this.VueToastr.s("ssss");
}).catch(function (error) {
console.log(error);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.