Ways to dynamically generate a card using NuxtJS

Question

Ways to dynamically generate a card using NuxtJS

I'm just starting out with NuxtJS and I'm curious about how to generate a v-card within a v-dialog box.

Imagine this scenario: I have an "add" button that triggers a v-dialog, where I can input information into a form. After submitting the form, a v-card is then generated with the details I entered.

Your assistance is greatly appreciated. Thank you!

javascript vue.js npm nuxt.js

Answer 1

Answer №1

Here is a potential solution for the issue you're facing:

In your code snippet:

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 = 'your custom 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 the newly created card element to the container
  container.innerHTML += content;
})
   }
}

Answer 2

Here is a potential solution for the issue you're facing:

In your code snippet:

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 = 'your custom 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 the newly created card element to the container
  container.innerHTML += content;
})
   }
}

Ways to dynamically generate a card using NuxtJS

Answer №1

Similar questions

An error occurred while trying to import a module due to an unexpected token

Remove search results in real-time

Is it possible to combine the existing request parameters with a new parameter in JSP/JSTL/JQuery?

The default value is not displayed in the Angular dropdown menu

Ensure that at least one checkbox is selected by using custom validation in jQuery

Strategies for managing Shopify's API request restrictions with the microapps Node.js module

Angular project icons not displaying in the browser

Incorporating an external script within a Next.js application

A guide to integrating OIDC through the vuex-oidc library within a Vue.js application

Is it possible to create Firebase real-time database triggers in files other than index.js?

The attempt to add a note with a POST request to the /api/notes/addnote endpoint resulted in a

Loading Images in Advance with jQuery, Native JavaScript, and CSS

Using jQuery to retrieve the values of two distinct sliders and executing a specific mathematical operation

What is the best way to set the page title on a server-rendered component when using the Next.js app router?

When attempting to display a sub view in Express, a 404 error is encountered

Creating a .post request using Axios in VueJS and Nuxt

Using ng-repeat with deeply nested objects

VueJS - Identical keys found while iterating through md-table items

Is there a way to retrieve two separate route details using jQuery simultaneously?

What is the best way to arrange the keys within a nested object in JavaScript?