vue filters和directives访问this的问题
记录一次奇葩的笔试题。要求自定义一个指令,点击后能跳转指定路由。directives和filters压根就没法访问this。脑袋都想破了。不废话了,上代码。<template><div><div v-join="(divData, that)">tag标签</div><p>{{divData}}</p><p>{{d
·
记录一次奇葩的需求。
要求自定义一个指令,点击后能跳转指定路由。
directives和filters压根就没法访问this。
脑袋都想破了。
不废话了,上代码。
<template>
<div>
<div v-join="(divData, that)">tag标签</div>
<p>{{divData}}</p>
<p>{{divData | sum(that)}}</p>
</div>
</template>
<script>
export default {
name: 'Main',
data(){
return {
divData:'传入的值',
that: this,
filtersData: '过滤器的值'
}
},
filters: {
sum(val, that){
return `${val}和${that.filtersData}`
}
},
directives: {
join: {
inserted(el, binding){
},
bind(el, binding){
console.log('------2')
el.addEventListener('click', function(){
binding.value.that.$router.push({
path: '/aside'
})
})
}
}
}
}
</script>
解决方案是在data中定义一个that变量指向this,再将这个变量当做参数传进directives,在directives内部就可以访问到this了,filters同理。
更多推荐
已为社区贡献4条内容
所有评论(0)