"인스턴스에 속성 또는 메서드가 정의되어 있지 않지만 렌더링 중에 참조됩니다."

"인스턴스에 속성 또는 메서드가 정의되어 있지 않지만 렌더링 중에 참조됩니다."

를 표시해야 합니다.item.title바깥에<v-carousel>하지만 다음 오류 메시지가 나타납니다.

[Vue warn] :속성 또는 메서드 "항목"은 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.속성을 초기화하여 데이터 옵션 또는 클래스 기반 구성 요소에서 이 속성이 반응하는지 확인하십시오.https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 를 참조해 주세요.

Stackoverflow 검색 결과를 확인했지만 이해하기가 정말 힘듭니다.이 예시로 설명해 주시면 감사하겠습니다.코드는 다음과 같습니다.

<v-carousel>
<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i">
</v-carousel-item>
</v-carousel>

<h1>TITLE: {{ item.title }}</h1>

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: '/static/a.jpg',
            title: 'A',
            text: 'texta'
          },
          {
            src: '/static/b.jpg',
            title: 'B',
            text: 'textb'
          }
          {
      }
    }
  }
</script>

아카이브해야 할 것은 다음과 같습니다.

이미지가 다음 이미지로 변경되는 즉시 범위 밖의 텍스트도 변경됩니다.범위 밖의 아이템 배열 값을 확인하려고 했지만 작동하지 않았습니다.<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>범위 밖에서 현재 회전목마 항목의 값에 액세스하는 방법은 무엇입니까?

를 추가해야 합니다.v-model에v-carousel컴포넌트:

<v-carousel v-model="carousel">
    <v-carousel-item 
        v-for="(item,i) in items"
        v-bind:src="item.src"          
        :key="i"
    ></v-carousel-item>
</v-carousel>
//then set title like this:
<h1>TITLE: {{ items[carousel].title }}</h1>

그리고 추가carousel에 가변적인.data

data () {
  return {
    carousel: 0, //like this
    items: [
       ...

언급URL : https://stackoverflow.com/questions/48244586/property-or-method-is-not-defined-on-the-instance-but-referenced-during-render