Блог

Я новичок в NuxtJS, и мне было интересно, как создать v-карту через v-диалоговое окно.

Например, я создаю кнопку добавления, затем открывается v-образный диалог, затем я заполняю форму, затем я «отправляю» и, наконец, создается v-образная карточка с тем, что я заполнил ранее.

Спасибо за вашу помощь.

Я думаю, это решит вашу проблему:

В вашем скрипте:

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