Vuejs - 未在实例上定义计算属性

Question

我是 VueJS 的新手，我很难让子组件正常工作。

首先，我在“视图”中有一些代码，我意识到我想多次使用它，所以我开始将这些代码分解为一个单独的组件，但我遇到了这个问题：

[Vue 警告]：属性或方法 "<feedbackCallback|stateCallback|submitCallback>" 未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

我的设置如下：

• Vue 2.4.2
• Webpack 3.5.5
• Bootstrap-Vue 1.0.0
• Vue-Router 2.7.0
• 我也在使用单文件组件

我将调用“视图”ViewA 的文件和“组件”“CompA”的文件

ViewA 移除了未进入单独组件的部分：

<template>
  [...]
  <b-form @submit="submitCallback">
    <b-form-group
      id="groupID"
      description=""
      label="Set Thing Here" :feedback="feedbackCallback"
      :state="stateCallback">
      <b-form-input
        id="inputID" :state="stateCallback"
        v-model.trim="thing">
      </b-form-input>
    </b-form/group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
  [...]
</template>

<script>
export default {
  [...]
  data () {
    return {
      thing: '',
      [...]
    }
  },
  computed: {
    stateCallback () {
      return 'invalid'
    },
    feedbackCallback () {
      return 'Please enter a valid thing'
    }
  },
  methods: {
    submitCallback (event) {
      [...]
    }
  },
  [...]
</script>

现在，我把这些人搬到了 CompA。

这是我得到错误的代码：

视图A：

<template>
  [...]
  <comp-a v-model.trim="thing" :thingvalue="thing"></comp-a>
  [...]
</template>

<script>
import CompA from '../components/CompA'

export default {
  name: 'view-a'
  components: {
    CompA
  },
  data () {
    return {
      thing: ''
    }
  }
}
</script>

CompA：

<template>
  <b-form @submit="submitCallback">
    <b-form-group
      id="groupID"
      description=""
      label="Set Thing Here" :feedback="feedbackCallback"
      :state="stateCallback">
      <b-form-input
        id="inputID" :state="stateCallback"
        :value="thingvalue">
      </b-form-input>
    </b-form/group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
</template>

<script>
export default {
  props: {
    thingvalue: {
      type: String
      required: true
    }
  },  
  computed: {
    stateCallback () {
      return 'invalid'
    },
    feedbackCallback () {
      return 'Please enter a valid thing'
    }
  },
  methods: {
    submitCallback (event) {
      [...]
    }
  }
}
</script>

您可能会注意到，当我将代码移过来时，我将 v-model.trim="thing" 更改为 :value="thing"。在我这样做之前，我遇到了同样的错误。

现在有什么我缺少的吗？我一直在挖掘很多东西来尝试理解。我什至查看了一些 bootstrap-vue 的代码，看看它们是否做了一些时髦的事情。但事实证明，它们有一些计算属性以非常相似的方式使用。所以我不明白问题出在哪里。如果您需要更多信息，请告诉我。

更新

我更确信 WebPack 和 VueJS 发生了一些事情，因为我在捆绑的 js 文件中没有找到这些属性/方法的任何定义。

Answer 1

结果证明这只是我的一个愚蠢的错误。没有结束脚本标记。 Eslint 也没有捕捉到（也许有一个设置可以确保它捕捉到），所以它用 webpack 编译就好了。教训：永远记住你的结束标签！