Why am I getting an error "Is not a function" in v-bind styles in vue js?

Question

I'm expecting to toggle classes with v-bind when the function returns true or false, but I'm getting an error "Is not a function" in Vuejs3 with Quasar2. Meanwhile I'm searching if a property string name exists in an array.

// child component
<p :class="this.setVisible('alex') ? 'visible' : 'hidden'">text</p>

export default {
  props: {
    setVisible: {
      type: Function,
      default: (name) => {}
    }
  }
  
  <style>
    .visible {
      display: block
    }
  </style>
  
// Parent component
<div>
  :setVisible="findstring(name)"/>
</div>

data() {
  return {
    array: ['alex', "john"]
  }
}
methods: {
  findstring (header) {            // looking if a prpriete string exists in an array
      if (this.array.indexOf(name) > -1) {
        return true
      } else return false
    }
}

Answer 1

This does not pass down the function as a prop:

:setVisible="findstring(name)"

It passes down the executed result of findstring(name). By including the () you are invoking the method. The child component expects a function but is receiving a boolean, causing your error.

If you want to actually pass down the function as a prop, just bind the function name

:setVisible="findstring"