为什么我在 vue js 中的 v-bind 样式中收到错误“不是函数”？

Question

我期望当函数返回 true 或 false 时使用 v-bind 切换类，但我在使用 Quasar2 的 Vuejs3 中收到错误“不是函数”。同时，我正在搜索数组中是否存在专有的字符串名称。

// 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

这不会将函数作为 prop 传递下去：

:setVisible="findstring(name)"

它传递

findstring(name)

的执行结果。通过包含

()

，您将调用该方法。子组件需要一个函数，但正在接收一个布尔值，导致您的错误。

如果你想实际将函数作为 prop 传递下去，只需绑定函数名称即可

:setVisible="findstring"