vue v-bind:class return 无效值

Question

我正在用 vue 编写一个应用程序，但我遇到了不正确的行为，尤其是我的行：class=require ？ 'require' : '' returns 字符串 'require' 即使 require 的值为 false，问题是什么？

<template>
  <custom-label label="Название">
    <input
        class="text_input"
        :class="require ? 'require' : ''"
        :value="$attrs.value" @input="$emit('input', $event.target.value)"
        placeholder="Матрица всея барановичского района"
    />
  </custom-label>
</template>

<script>
export default {
  name: "InputText",
  components: {CustomLabel},
  computed: mapState({ state: state => state }),
  props: {
    require: Boolean
  }
};
</script>

以下是来自开发者工具的截图

Answer 1

改用:class="{ require }"。

Answer 2

在 Whosebug 上写问题之前，我花了 3 个小时在这上面。我一发布问题，几分钟后我意识到我在全局区域有一个 require 函数，例如图像

<img :src="require('./img.png')" />

这是一个非常愚蠢的错误，但我希望同样遇到它的人能够在我的回答的帮助下避免它。

vue v-bind:class return 无效值

vue v-bind:class return invalid value

javascript

vue.js