当前位置: 首页 > 工具软件 > layer-vue > 使用案例 >

【解决】Vue引入layer插件后如何使this仍然指向vue对象

易烨磊
2023-12-01

vue引入layer踩坑
本想引用layer中的confirm确认框
按照layui官网介绍的使用npm 安装的方式:npm i layui-src
,并通过 layui.use() 方式来加载该入口文件,任然发现提示layer未定义

下载layer插件成功引入
接着只有下载完整版的layer插件,放在static文件目录下,
再index.html文件中引入全局js和css文件
再项目中就可以使用layer插件了,

插件中this指向问题
在使用中发现在layer对象里面调用this.$htttp.delete方法报错,显示delete未定义,发现this指向不再是vue对象而是layer对象了,故在created中将通过定义的myVue将指向vue对象的this保存起来,接着在layer插件里面就可以使用了。

<script>
import Alert from './Alert'
var myVue = {}
export default {
  name: 'CustomerDetail',
  data () {
    return {
     customer:""
    }
  },
  methods:{
  fn(){
    layer.confirm('确认删除吗?',{icon:3,title:'删除提示'},function(index){
 myVue.$http.delete("http://localhost:3000/users/"+myVue.customer.id).then(function(){
        myVue.$router.push({path:"/",query:{alert:"删除成功!!!"}});})
      layer.close(index);
      });
  },
  },
  created(){
    this.showCluster();
    myVue = this;
  }
 /* beforeCreate(){
    myVue = this;这里赋值也可以
  }*/

}
</script>
 类似资料: