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

Question

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

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

[Vue warn]: Property or method "<feedbackCallback|stateCallback|submitCallback>" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我的设置如下:

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

这是我现在遇到错误的代码:

View 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 编译就好了。教训:永远记住你的结束标签!