Vue项目中,在filters中使用this(Vue实例对象)

效果图:

方式一:

在data对象中定义一个 this_ 变量,接收this(Vue实例对象),如下代码:

data() {
     return {
       this_: this
    }
  }

然后声明过滤器时,在形参中加上vue

filters: {
     teacherFiliters(value, vue) {
       console.log(vue)
       for (let i = 0; i < vue.teachers.length; i++) {
         const object = vue.teachers[i]
         if (object.value === value) {
           return object.label
         }
       }
     }
   },

 调用时传入 this_ 这个变量

     {{ value | teacherFiliters(this_) }}   

全部代码如下

<template>
  <div>
    {{ value | teacherFiliters(this_) }}
  </div>
</template>

<script>
export default {
  name: 'Class',
  filters: {
    teacherFiliters(value, vue) {
      console.log(vue)
      for (let i = 0; i < vue.teachers.length; i++) {
        const object = vue.teachers[i]
        if (object.value === value) {
          return object.label
        }
      }
    }
  },
  data() {
    return {
      value: '1',
      this_: this,
      teachers: [
        {
          label: '郭老师',
          value: '1'
        },
        {
          label: '姚老师',
          value: '1'
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>

方式二:

在外部定义一个 this_ 变量

let this_

然后在 beforeCreate() 生命周期函数中将当前的this对象赋值给 this_ 变量

beforeCreate() {
     this_ = this
   }

然后在声明过滤器的时候,使用 this_ 这个变量获取data中的数据,如下代码:

filters: {
     teacherFiliters(value) {
       for (let i = 0; i < this_.teachers.length; i++) {
         const object = this_.teachers[i]
         if (object.value === value) {
           return object.label
         }
       }
     }
   },

调用的时候直接使用这个过滤器即可

     {{ value | teacherFiliters() }}   

全部代码如下:

<template>
  <div>
    {{ value | teacherFiliters() }}
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
let this_
export default {
  name: 'Class',
  filters: {
    teacherFiliters(value) {
      for (let i = 0; i < this_.teachers.length; i++) {
        const object = this_.teachers[i]
        if (object.value === value) {
          return object.label
        }
      }
    }
  },
  data() {
    return {
      value: '1',
      this_: this,
      teachers: [
        {
          label: '郭老师',
          value: '1'
        },
        {
          label: '姚老师',
          value: '1'
        }
      ]
    }
  },
  beforeCreate() {
    this_ = this
  }
}
</script>

<style scoped>

</style>

方式三:

不使用filters进行过滤,使用自定义的函数进行过滤,如下代码:

<template>
  <div>
    {{ getTeacher(value) }}
  </div>
</template>

<script>
export default {
  name: 'Class',
  data() {
    return {
      value: '1',
      teachers: [
        {
          label: '郭老师',
          value: '1'
        },
        {
          label: '姚老师',
          value: '1'
        }
      ]
    }
  },
  methods: {
    getTeacher(value) {
      for (let i = 0; i < this.teachers.length; i++) {
        const object = this.teachers[i]
        if (object.value === value) {
          return object.label
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注