In Vue JS, call a filter from a method inside the vue instance but $options is undefined

Question

I've already seen this answer which fits my question : In Vue JS, call a filter from a method inside the vue instance

Now with that out of the way, when doing

console.log(this.$options)

I get undefined so I can't call filters on it.. This is my code:

 methods:{
    style:(input)=>{
      return {
        backgroundColor:this.$options.filters.color(input),
      }
    }
  },
  filters: {
    color: function (value) {
      console.log(color(value));
      if (!value) return ''
      return `rgb(${value},${value},${value})`
    }
  }

Error in render: "TypeError: Cannot read property 'filters' of undefined"

I think may be your arrow function ! How about changing style: function(input) {} — Jack jdeoel
– Jack jdeoel, Commented Jul 24, 2018 at 7:53
you're absolutely right , figured it out in the end, thanks! — Sebastian Andrei Iordache
– Sebastian Andrei Iordache, Commented Jul 24, 2018 at 8:11

Harshal Patil · Accepted Answer · 2018-07-24 08:08:26Z

1

You are using the arrow function for style method. It should be:

style(input) {
    return {
        backgroundColor:this.$options.filters.color(input),
    }
}

And if you are not using this within your filter then you can extract it outside like:

function color (value) {
    console.log(color(value));
    if (!value) return ''
    return `rgb(${value},${value},${value})`
}

methods: {
    style(input) {
        return {
            backgroundColor: color(input),
        }
    }
},
filters: { color }

answered Jul 24, 2018 at 8:08

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Andrei Iordache Over a year ago

the first part is the right answer even tho the second way of coding also makes sense thank you !

oliver34 · Accepted Answer · 2018-07-24 08:15:55Z

0

you can write this function in methods

methods:{
    style:(input)=>{
      return {
        backgroundColor:this.color(input),
      }
    },
    color: (value) {
      console.log(color(value));
      if (!value) return ''
        return `rgb(${value},${value},${value})`
      }
  }

answered Jul 24, 2018 at 8:15

oliver34

3302 silver badges7 bronze badges

Collectives™ on Stack Overflow

In Vue JS, call a filter from a method inside the vue instance but $options is undefined

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related