Vue3+Quasar2中v-bind绑定类时出现‘Is not a function’错误原因

你的代码里存在几处语法和逻辑错误，直接导致了“Is not a function”报错，下面逐个修正：

1. 子组件模板语法错误 #

模板绑定class时，不需要用双引号包裹表达式，Vue模板里也不需要加this（直接访问props/methods即可），同时补充hidden类的样式：

<template>
  <p :class="setVisible('alex') ? 'visible' : 'hidden'">text</p>
</template>

<script>
export default {
  props: {
    setVisible: {
      type: Function,
      default: (name) => false // 默认返回false更符合逻辑
    }
  }
}
</script>

<style scoped>
.visible {
  display: block;
}
.hidden {
  display: none;
}
</style>

2. 父组件传递函数Props错误 #

传递函数类型的props时，直接传函数引用即可，不需要加引号或调用；另外findstring方法里参数名和内部使用的变量不匹配，还可以用includes简化判断逻辑：

<template>
  <!-- 替换成你的子组件标签，比如<ChildComponent /> -->
  <ChildComponent :setVisible="findstring" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      array: ['alex', 'john']
    }
  },
  methods: {
    findstring(name) {
      // 用includes替代indexOf，写法更简洁直观
      return this.array.includes(name)
    }
  }
}
</script>

错误根源总结 #

• 子组件模板错误地用双引号包裹了class绑定表达式，导致Vue把整个字符串当成类名，而非执行函数
• 父组件传递props时，用引号包裹了函数调用，传递的是字符串而非函数引用，子组件调用自然会报“不是函数”
• 父组件findstring方法内部参数名与使用的变量不一致，存在逻辑漏洞

内容的提问来源于stack exchange，提问作者john