Multiple manners, same style in Vue.js

Question

Multiple manners, same style in Vue.js

Navigation

#1 by (2 votes)

3

I am working on a web application using Vue2 and BootstrapVue , and I have a series of 6 elements (of which I will only upload 3 here, for practical reasons), all aesthetically equal, but with different content, rendereados by a v-for . To them I am adding a modal with Bootstrap, which could generate it in the same way, but the detail is that I do not want to load the page with the 6 manners in the background. I want to generate them at the moment of clicking on the "Learn More" button and that the information corresponding to that element of the array is shown in my file .vue . I do not know how to do to relate by a index to the element which I want to show the information. Below I attach my code:

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()
    }
  }
}

bootstrap-4 vue.js modal bootstrap-vue

asked by TheWoodStudio 26.03.2018 в 21:27

source

1 answer

Dimensions of the puzzle Problem when relating 4 tables with left join

score 2 · Accepted Answer

To do what you need, we are going to create another variable in the data environment, which contains the card to show:

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

The idea behind this is to pass to the modal the selected card.

Now what follows can be done in several ways. Your modal should be like this:

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

But the way of knowing the selected letter, can vary, to look for it by index, or pass directly the card to look for. For that, in the v-for let's do the following inside the show button:

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

In this example, I pass to the function the index, which I added previously to each card (by hand). Also, you could do something like this:

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

And the function in this case will receive a card.

The function will be as follows:

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

Leave the debug, so you can see what you are receiving. If we pass the card directly, the function would be something like this:

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

Extra:

The modal can be shown linked to a v-model such as:

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

adding in data:

modalShow: false

And in the role, doing something like

modalShow = true //false, para cerrarlo