Vuejs - 인스턴스에 정의되지 않은 계산된 속성

Vuejs - 인스턴스에 정의되지 않은 계산된 속성

나는 VueJS를 처음 접하는 편이고 어린이 부품을 제대로 작동시키는 데 어려움을 겪고 있다.

그래서 우선, 나는 "보기"에서 내가 두 번 이상 사용하고 싶어한다는 것을 깨달은 몇 가지 코드를 가지고 있어서, 그 코드를 별도의 구성요소로 분류하기 시작했지만, 나는 다음과 같은 문제에 부딪쳤다.

[부유 경고]:속성 또는 방법"<feedbackCallback|stateCallback|submitCallback>"인스턴스에서 정의되지 않지만 렌더링 중에 참조된다.데이터 옵션에서 반응형 데이터 속성을 선언하십시오.

내 설정은 다음과 같다.

• 부에 2.4.2
• 웹팩 3.5.5
• 부트스트랩-Vue 1.0.0
• 부에루터 2.7.0
• 단일 파일 구성 요소도 사용 중임

"보기" ViewA 파일 및 "구성 요소" "Component" 파일 호출A"

별도의 구성 요소로 전환되지 않은 부품이 제거된 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>

이 사람들을 컴파이로 옮겼어

이 코드에서 오류가 발생함:

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"이런 짓을 하기 전까진 똑같은 실수를 하고 있었어

내가 놓친 게 있나?나는 이해하려고 많은 것을 파고 들었다.나는 심지어 그들이 뭔가 펑키한 일을 하는지 알아보기 위해 부트스트랩-뷰의 코드 몇 개를 살펴보았다.하지만 그들은 매우 유사한 방식으로 사용되는 계산된 특성들을 가지고 있는 것으로 밝혀졌다.그래서 나는 그 문제가 어디서 발생하는지 이해하지 못하겠어.더 많은 정보가 필요하면 나에게 알려줘.

갱신하다

번들로 구성된 js 파일에서 이러한 속성/방법들에 대한 정의를 찾을 수 없기 때문에 나는 WebPack과 VueJS에 무슨 일이 일어나고 있다고 확신한다.

알고 보니 그건 그냥 멍청한 실수였어.닫는 스크립트 태그가 없음.에슬린트도 잡지 못했기 때문에 웹팩으로 편집했다.교훈:닫는 태그는 항상 기억하십시오!

참조URL: https://stackoverflow.com/questions/48695614/vuejs-computed-property-not-being-defined-on-the-instance