«La propiedad o método no está definido en la instancia, sino que se hace referencia durante render»

Necesito mostrar el item.title fuera de la <v-carousel> pero me sale este mensaje de error:

[Vue advertir]: Propiedad o método «elemento» no está definido en la instancia, sino que se hace referencia durante el render. Asegúrese de que esta propiedad es reactivo, ya sea en la opción de datos, o para la clase basada en componentes, mediante la inicialización de la propiedad. Ver: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

He comprobado los resultados de la búsqueda de Stackoverflow pero me cuesta mucho entenderlo. Estaría agradecido si alguien puede que me lo explique por este ejemplo.
Aquí está mi código:

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

Esto es lo que necesito para archive:

Tan pronto como cambia la imagen siguiente – el texto fuera de la ámbito de aplicación debería cambiar demasiado. Traté de comprobar el valor de la matriz de elementos fuera del ámbito de aplicación pero no funciona:
<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>
Cómo acceder al valor de la corriente de carrusel elemento fuera de su alcance?

  • en su ejemplo, item está dentro de v-carousel-item alcance, por lo tanto no se puede utilizar fuera de ella. Ahora todo depende de lo que realmente queremos lograr. (que el título debe estar dentro de h1, o deberían todos los v-carousel-item tener su propio título)
  • Gracias por la explicación. Esto es lo que necesito para archive: Tan pronto como los cambios de imagen para la próxima – el texto del título fuera de la <v-carousel> ámbito de aplicación debería cambiar demasiado. Traté de comprobar el valor de la matriz de elementos fuera del alcance pero no funcionó: <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>
  • Por favor, si encuentras tiempo, acabo de actualizar tu pregunta por lo que es más claro lo que usted está tratando de lograr, por lo que no sólo se siente aquí en los comentarios.
InformationsquelleAutor Tom | 2018-01-13

2 Kommentare

  1. 6

    Necesita agregar v-model en v-carousel componente:

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

    Y agregar carousel variable data

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

    Creo que sólo debería colocar su <h1> en el interior de su <v-carousel-item> y no fuera de él!

    Tal como esto:

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

    Esto debería funcionar!

    • Quieren el valor de uso en el exterior, por lo que esta respuesta es incorrecta. Ver mi respuesta.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea