web-dev-qa-db-ja.com

「プロパティまたはメソッドはインスタンスで定義されていませんが、レンダリング中に参照されます」

_item.title_の外側に_<v-carousel>_を表示する必要がありますが、このエラーメッセージが表示されます。

[Vue警告]：プロパティまたはメソッド「アイテム」はインスタンスで定義されていませんが、レンダリング中に参照されます。プロパティを初期化することにより、データオプションで、またはクラスベースのコンポーネントで、このプロパティがリアクティブであることを確認してください。 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>
_

これは私がアーカイブする必要があるものです：

画像が次の画像に変わるとすぐに-スコープのテキストoutsideも変わるはずです。スコープ外の項目配列の値を確認しようとしましたが、うまくいきませんでした：<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>スコープ外の現在のカルーセル項目の値にアクセスする方法は？

vuejs2vuetify.jsvue-reactivity
6
Tom

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: [
       ...
8
Traxo