3

Estoy trabajando en una aplicación web usando Vue2 y BootstrapVue, y tengo una serie de 6 elementos (de los cuales sólo voy a subir 3 aquí, por cuestiones prácticas), todos iguales estéticamente, pero con distinto contenido, rendereados mediante un v-for. A ellos les estoy agregando un modal con Bootstrap, el cual podría generarlo de la misma manera, pero el detalle es que no quiero que cargue la página con los 6 modales en segundo plano. Quiero generarlos en el momento del click en el botón "Learn More" y que se muestre la información correspondiente a ese elemento del array en mi archivo .vue. No sé cómo hacer para relacionar mediante un index al elemento el cual quiero que se muestre la información. A continuación adjunto mi código:

Component.html

<div id="blocks">
    <b-container>
        <div class="cards">
            <div class="card" v-for="card in cards">
                <img :src="card.image" :alt="card.mainTitle">
                <div class="card-content">
                    <h5>{{card.mainTitle}}</h5>
                    <p>{{card.text}}</p>
                    <a href="javascript:void(0)" @click="showModal">Learn More</i></a>
                </div>
            </div>
        </div>
    </b-container>
    <b-modal ref="modal" centered hide-footer>
        <div class="d-block text-center">
            <h3>{{cards.mainTitle}}</h3>
            <p>{{modalText}}</p>
        </div>
    </b-modal>
</div>

Component.vue

export default {
  name: 'benefits',
  data () {
    return {
      cards: [
        {
          image: require('../../assets/image1.jpg'),
          mainTitle: 'Title1',
          text: 'Text1',
          modalText: 'Modal text content1'
        },
        {
          image: require('../../assets/image2.jpg'),
          mainTitle: 'Title2',
          text: 'Text2',
          modalText: 'Modal text content2'
        },
        {
          image: require('../../assets/image3.jpg'),
          mainTitle: 'Title3',
          text: 'Text3',
          modalText: 'Modal text content3'
        }
      ]
    }
  },
  methods: {
    showModal () {
      this.$refs.modal.show()
    },
    hideModal () {
      this.$refs.modal.hide()
    }
  }
}
3
  • 1
    y para evitar usar el index (que tendria que ver como se hace), no usas otra propiedad? que sea una de los items de cards[]? y que el modal este bindeado a esa propiedad? ;)
    – gbianchi
    Commented el 26 mar. 2018 a las 19:58
  • Es un buen punto @gbianchi! Ahora voy a pensar un poco cómo podría ser. Commented el 26 mar. 2018 a las 20:00
  • Realmente no lo puedo sacar. Apreciaría una mano! Saludos! Commented el 26 mar. 2018 a las 23:23

1 respuesta 1

2

Para hacer lo que necesitas, vamos a crear una variable mas en el entorno de data, que contenga la card a mostrar:

data(): {
    return {
        cards: [
                {
                    image: '../../assets/image1.jpg',
                    mainTitle: 'Title1',
                    text: 'Text1',
                    modalText: 'Modal text content1',
                    index: 0 //ESTA LINEA ES IMPORTANTE
                },...
        ],
        ModalCard: {}
    }
 }

La idea detras de esto, es pasarle al modal la card seleccionada.

Ahora lo que sigue se puede hacer de varias formas. Tu modal debe quedar asi:

<b-modal ref="modal" centered hide-footer>
    <div class="d-block text-center">
        <h3>{{this.modalShow.mainTitle}}</h3>
        <p>{{this.modalShow.modalText}}</p>
    </div>
</b-modal>

Pero la forma de saber la carta seleccionada, puede variar, a buscarla por indice, o pasar directamente la card a buscar. Para eso, en el v-for vamos a hacer lo siguiente dentro del boton mostrar:

<div class="card" v-for="card in cards">
    <img :src="card.image" :alt="card.mainTitle">
    <div class="card-content">
        <h5>{{card.mainTitle}}</h5>
        <p>{{card.text}}</p>
        <a href="javascript:void(0)" @click="showModal(card.index)">Learn More</i></a>
    </div>
</div>

En este ejemplo, le paso a la funcion el indice, que agregue previamente a cada card (a mano). Tambien, se podria hacer algo asi:

<a href="javascript:void(0)" @click="showModal(card)">Learn More</i></a>

Y la funcion en este caso va a recibir una card.

La funcion quedara de la siguiente forma:

showModal(index) {
    console.debug(index);
    this.modalShow = this.cards[index];
    this.$refs.modal.show()
}

Deje el debug, para que se vea que esta recibiendo. Si pasamos la card directamente, la funcion seria algo asi:

showModal(theCard) {
    console.debug(theCard);
    this.modalShow = theCard;
    this.$refs.modal.show()
}

Extra:

El modal se puede mostrar linkeado a un v-model como:

<b-modal v-model="modalShow">

agregando en data:

modalShow: false

Y en la funcion, haciendo algo asi como

modalShow = true //false, para cerrarlo
1
  • Excelente! Logré hacerlo funcionar gracias a tu esmerada explicación. Muchas gracias! Commented el 27 mar. 2018 a las 12:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.