gpt4 book ai didi

laravel-5.3 - Vue 2 Laravel 5.3 vue-toastr

转载 作者:行者123 更新时间:2023-12-01 12:23:09 25 4
gpt4 key购买 nike

NOTE: Please refer to the comment on the suggested answer if you failed to find any flaw in your codes or no console log error appeared.

任何有 vue-toastr 经验的人请帮助解决以下问题。我按照 here 上的说明进行操作.似乎在以下代码之后 js 被正确读取(我猜)

import VueToast from 'vue-toast'

这是我第一次将 css 导入到 Vue 组件中。做了一些研究,我想我有 vue-loader,它应该包括提到的 vue-style-loader here (如果我错了,请更正)并且我使用以下代码导入 vue-toastr css

import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css'

我加载页面并单击按钮,但没有显示 toastr,也没有任何控制台日志错误。我特此附上我的代码的完整版本,请帮忙。

<template>
<div>
<button @click.prevent="toastIt">Click</button>
<vue-toast ref='toast'></vue-toast>
</div>
</template>

<script>
import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css'
import VueToast from 'vue-toast'
export default {
components:{
'vue-toast': VueToast,
},
data(){
return{
user:{},
shop:{}
}
},
props:[
],
created(){
},
mounted(){
},
updated(){
},
methods:{
toastIt(){
this.$refs.toast.showToast['hihi']
}
},
computed:{

}
}
</script>

编辑 1

在圆括号编辑之后,我试过了,但仍然没有弹出任何内容。但每次我点击按钮时,它似乎在控制台日志中没有任何错误地获取东西。请帮忙! Network

编辑#2

来自下图。看起来正在读取 vue-toast 并且页面中实际上有 toastr 的元素。每次我点击按钮时,vue-toast 的 div 中都会有更新,但从页面上看不到任何内容。

enter image description here

最佳答案

你有语法错误:this.$refs.toast.showToast['hihi']。您想通过使用圆括号而不是方括号来调用方法 showToast:this.$refs.toast.showToast('hihi')

完整代码:

<template>
<div>
<button @click.prevent="toastIt">Click</button>
<vue-toast ref='toast'></vue-toast>
</div>
</template>

<script>
import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css'
import VueToast from 'vue-toast'
export default {
components:{
'vue-toast': VueToast,
},
data(){
return{
user:{},
shop:{}
}
},
props:[
],
created(){
},
mounted(){
},
updated(){
},
methods:{
toastIt(){
this.$refs.toast.showToast('hihi')
}
},
computed:{

}
}
</script>

关于laravel-5.3 - Vue 2 Laravel 5.3 vue-toastr,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42184270/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com