vue filters和directives访问this的问题详解
更新时间：2022年01月24日 08:38:30 作者：陈景夏
这篇文章主要介绍了vue filters和directives访问this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue filters和directives访问this
记录一次奇葩的需求。
要求自定义一个指令，点击后能跳转指定路由。
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同理。
directives所遇小bug
自己在利用vue写todoList的时候遇到一个小bug,记录一下
写个指令，当双击进行编辑todo,让其自动聚焦，结果效果如下，
代码如下：
directives: {
focus(el,bindings) {
if(bindings.value) {
el.focus();
}
}
}<input v-focus="todo == t" type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" >
多方查找原因，把自定义v-focus指令放末尾，就好了，代码如下：
<input type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" v-focus="todo == t">
是否自定义指令都应放后面呢？这就需要以后验证了
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<style>
.del{
text-decoration: line-through;
color: #ccc!important;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading">
<input type="text" v-model="value" class="form-control" @keydown.enter="add">
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item" @dblclick="change(todo)" v-for="(todo,index) in todos" :key="index">
<div v-show="todo != t" :class="{del: todo.isSelected}">
<input type="checkbox" v-model="todo.isSelected">{{todo.title}}
<button class="pull-right btn btn-danger btn-xs" @click="remove(index)">⨂</button>
</div>
<input type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" v-focus="todo == t">
<!-- 下面是错误代码，可以把上面的注释掉打开下面的对比下 -->
<!-- <input v-focus="todo == t" type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" > -->
</li>
</ul>
</div>
<div class="panel-footer">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">全部</a></li>
<li role="presentation"><a href="#">已完成</a></li>
<li role="presentation"><a href="#">未完成</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
todos:[],
hash:'complete',//路径切换时 获取的hash值
value:'',// 输入框中需要增加的内容,
t:''//当前点击的那一个
},
created(){ //当vue创建时执行的方法
//如果storage有 就用这里的值 没有就是空数组
this.todos = JSON.parse(localStorage.getItem('todos')) || [{isSelected:true,title:'晚上回去睡觉'}];
},
watch:{ //watch默认 只监控一层，例如 todos 可以监控数组的变化，监控不到对象的变化
todos:{
handler(){
localStorage.setItem('todos',JSON.stringify(this.todos));
},
deep:true
}
},
methods:{
addTodo(){
let todo = {isSelected:false,title:this.value};
this.todos.push(todo);
this.value = '';
},
remove(todo){
this.todos = this.todos.filter(item=>todo!==item);
},
change(todo){
//todo代表的是我当前点击的是哪一个，存储当前点击的这一项
this.t = todo;
},
reset(){
this.t = '';
}
},
computed:{
lists(){
if(this.hash === 'complete'){
return this.todos;
}
if(this.hash === 'finish'){
return this.todos.filter(item=>item.isSelected)
}
if(this.hash === 'unfinish'){
return this.todos.filter(item=>!item.isSelected)
}
},
total(){
//求出数组中为false的个数
//将数组中的true全部干掉，求出剩余length
return this.todos.filter(item=>!item.isSelected).length;
}
},
directives:{ //指令，就是操作dom
focus(el,bindings){
//bindings中有一个value属性 代表的是指令对应的值v-auto-focus="值"
if(bindings.value){
el.focus();
}
//console.log(el,bindings);
}
}
});
let listener = () => {
let hash = window.location.hash.slice(1) || 'complete'; //如果打开页面没有hash默认是全部
vm.hash = hash;
};
listener(); //页面一加载 就需要获取一次hash值，否则可能导致 回到默认hash
window.addEventListener('hashchange',listener,false);
</script>
</body>
</html>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了VueJs里利用CryptoJs实现加密及解密的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue将data恢复到初始状态 && 重新渲染组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
很多朋友在token过期时刷新页面，页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，针对这个问题该怎么处理呢，下面小编给大家带来原因分析及解决方法，一起看看吧2021-07-07
使用vue开发的页面都是通过px设置它的尺寸，如果换了一个不同尺寸的屏幕就会出现页面排版错乱，显示不完整等情况，下面通过插件将px装换为rem单位适应不同尺寸的屏幕,需要的朋友可以参考下2022-12-12
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解，感兴趣的朋友一起看看吧2016-11-11
在项目中,请求后台接口返回的值是秒,这篇文章主要给大家介绍了关于vue将秒数转成"时分秒"格式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了说说Vue.js中的functional函数化组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
vue项目打包上线后,首次打开会发现加载很慢,出现白屏的问题,下面这篇文章主要给大家介绍了关于Vue首屏加载过慢出现白屏的6种优化方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了Vue实现随机验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼2023-04-04
最新评论