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

我是VueJS的新手，我很难让子组件正常工作。
因此，首先，我在“ View ”中有一些代码，我意识到我想多次使用，因此我开始将该代码分解为一个单独的组件，但是遇到了这个问题:

我的设置如下:

Webpack 3.5.5

Bootstrap-Vue 1.0.0

Vue路由器2.7.0

我也在使用单个文件组件

我将调用“ View ” 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。
这是我现在得到错误的代码:
ViewA:

<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文件中找不到这些属性/方法的任何定义。

最佳答案

好吧，这对我来说只是一个愚蠢的错误。没有结束脚本标签。 Eslint也没有捕获到任何东西(也许有一个设置可以确保它可以捕获)，因此可以使用webpack进行编译。类(class):永远记住您的结束标签!