[Vuejs]-How to create dynamicaly a card in NuxtJS

0👍

I think this will solve you’r problem:

In you’r script:

data() {
    return {
       formInfo: {
           title: '',
           description: ''
       }
    }
},
methods: {
   onSubmit() {
       let container = document.getElementById('card-container');

       this.formInfo.forEach((result, i) => {
       // Create card element
       let card = document.createElement('v-card');
       card.classList = 'you'r classes';

       // Construct card content
       const content = `
       <div class="card">
       <div class="card-header" id="heading-{i}">
       <h5 class="mb-0">
       <button class="btn btn-link">
       </button>

      </h5>
    </div>

    <div id="collapse-{i}" class="collapse show">
    <div class="card-body">
        <h5>{result.title}</h5>
        <p>{result.description}</p>
      </div>
    </div>
  </div>
  `;

  // Append newly created card element to the container
  container.innerHTML += content;
})
   }
}

Leave a comment