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

Question

我对 VueJS 还很陌生，我很难让子组件正常工作。

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

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

我的设置如下：

• Vue 2.4.2
• 网络包 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>

组合A：

<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 编译得很好。教训：永远记住你的结束标签！