“Propriété ou méthode n'est pas définie sur l'instance, mais référencé au cours de rendu”

J'ai besoin d'afficher la item.title à l'extérieur de la <v-carousel>, mais je reçois ce message d'erreur:

[Vue avertir]: Propriété ou méthode "point" n'est pas défini sur l'instance, mais référencé au cours de rendu. Assurez-vous que cette propriété est réactif, que ce soit dans l'option de données, ou pour la classe de base de composants, en initialisant la propriété. Voir: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

J'ai vérifié les résultats de la Stackoverflow de recherche mais j'ai vraiment du mal à comprendre. Je vous serais reconnaissant si quelqu'un pourrait-il m'expliquer par cet exemple.
Voici mon code:

<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>

C'est ce dont j'ai besoin pour archive:

Dès qu'une image à une autre - l'un texte à l'extérieur de la portée doit aussi changer. J'ai essayé de vérifier la valeur de l'élément du tableau à l'extérieur de la portée mais il ne fonctionne pas:
<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>
Comment accéder à la valeur du courant carrousel élément en dehors de la portée?

  • dans votre exemple item est dans v-carousel-item champ d'application, de sorte que vous ne pouvez pas l'utiliser à l'extérieur. Maintenant, tout dépend de ce que vous voulez vraiment atteindre. (dont le titre doit être à l'intérieur de h1, ou à chaque v-carousel-item avoir son propre titre)
  • Merci pour l'explication. C'est ce dont j'ai besoin pour archive: dès Qu'une image à une autre - le titre du texte en dehors de la <v-carousel> portée doit aussi changer. J'ai essayé de vérifier la valeur de l'élément du tableau à l'extérieur de la portée mais il ne fonctionne pas: <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>
  • S'il vous plaît si vous trouvez le temps, juste de mettre à jour votre question, il est donc plus claire de ce que vous essayez d'atteindre, afin de ne pas rester ici dans les commentaires.
InformationsquelleAutor Tom | 2018-01-13
  1. 7

    Vous devez ajouter v-model sur v-carousel composant:

    <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>

    Et ajouter carousel variable data

    data () {
  return {
    carousel: 0, //like this
    items: [
       ...
    InformationsquelleAutor Traxo
  2. -1

    Je pense que vous devriez placer votre <h1> à l'intérieur de votre <v-carousel-item> et pas à l'extérieur!

    Comme cela:

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

    Cela devrait fonctionner!

    • Ils veulent de la valeur d'usage à l'extérieur, de sorte que cette réponse est incorrecte. Voir ma réponse.
    InformationsquelleAutor Syncro