web-dev-qa-db-fra.com

"La propriété ou la méthode n'est pas définie sur l'instance mais référencée pendant le rendu"

J'ai besoin d'afficher le item.title En dehors du <v-carousel> Mais je reçois ce message d'erreur:

[Vue warn]: La propriété ou la méthode "item" n'est pas définie sur l'instance mais référencée lors du rendu. Assurez-vous que cette propriété est réactive, soit dans l'option de données, soit pour les composants basés sur une classe, 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 recherche Stackoverflow mais j'ai vraiment du mal à le comprendre. Je serais reconnaissant si quelqu'un pouvait me l'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>

Voici ce que je dois archiver:

Dès qu'une image passe à la suivante - le texte à l'extérieur de la portée devrait également changer. J'ai essayé de vérifier la valeur du tableau d'éléments en dehors de la portée, mais cela n'a pas fonctionné: <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1> Comment accéder à la valeur de l'élément de carrousel actuel en dehors de la portée?

vuejs2vuetify.jsvue-reactivity
6
Tom

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 ajoutez carousel variable à data

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